我正在嘗試為移動設備創建一個回應式頁腳，以便當用戶單擊其中一個標題時，該部分的元素會展開，而另一個部分的其他元素保持折疊狀態，再次單擊時它會折疊。到目前為止，我只設法創建一個功能，在單擊所有元素的所有元素后會展開。
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="nav-footer">
<div class="nav">
<h2 class="title">Legal</h2>
<ul class="list">
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="nav">
<h2 class="title">Company</h2>
<ul class="list">
<li>About us</li>
<li>Mission</li>
</ul>
</div>
<div class="nav">
<h2 class="title">Assistance</h2>
<ul class="list">
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS
.list {
max-height: 0;
overflow:hidden;
transition: max-height 1s ease-out;
}
.title {
cursor: pointer;
}
.test {
height:auto;
max-height: 500px;
transition: max-height 0.5s ease-in !important;
}
JS
jQuery(" h2").click(function(){
$("ul").toggleClass("test");
});
提前感謝您的寶貴時間！
uj5u.com熱心網友回復：
您可以使用$(this).next("ul").toggleClass("test");查找與您的 h2“相關”的 ul。
演示
顯示代碼片段
jQuery(" h2").click(function(){
$(this).next("ul").toggleClass("test");
});.list {
max-height: 0;
overflow:hidden;
transition: max-height 1s ease-out;
}
.title {
cursor: pointer;
}
.test {
height:auto;
max-height: 500px;
transition: max-height 0.5s ease-in !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="nav-footer">
<div class="nav">
<h2 class="title">Legal</h2>
<ul class="list">
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="nav">
<h2 class="title">Company</h2>
<ul class="list">
<li>About us</li>
<li>Mission</li>
</ul>
</div>
<div class="nav">
<h2 class="title">Assistance</h2>
<ul class="list">
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/463091.html
標籤：javascript html jQuery css 页脚
上一篇：獲取一堆影像的影像src值