我试图在一个网页上实现显示/隐藏功能。基本上，我的网站上有一个页面显示“ Jargon”及其定义。用户单击标题，然后应显示定义。
我尝试了两种不同的技术，一种有效，但是非常苛刻，没有过渡，它基本上是开放的或封闭的：
jQuery(function($){
var acc = document.getElementsByClassName("jarg-container");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
}); .jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
height: 4.5em;
width: 45% !important;
margin: 0 2.5% 2em;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container .jargon-desc {
height: 0;
display: none;
}
.jarg-container.active .jargon-desc{
height:100%;
display:block;
}
.jarg-container.active {
height: 100%;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.active h2::after {
content: "\2796";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>我喜欢的另一个，但是当一个打开时，它们都打开了：
$('.jargon-header').on('click', function(){
$('.jargon-desc').toggleClass('show');
}); .jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition:all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>理想情况下，我希望将2 ...的组合使用，其中所有元素都单独打开，并使用第二个代码使用的过渡效果...
结合两个的任何帮助都将是惊人的
要同时实现过渡和一次仅移动一个元素，可以使用this关键字。调用函数（在这种情况下，即function()在您的点击侦听器内部）将绑定this到该上下文。这样，您可以简单地使用来选择单击的元素$(this)。
这可能不是最详细的说明，所以这里有关于该主题的更多信息。
$('.jargon-header').on('click', function() {
// Use this to select the element that was clicked
$(this)
// Then just select the next description
.next('.jargon-desc')
// And toggle the class on that description
.toggleClass('show');
});.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition: all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句