简体   繁体   English

手风琴jQuery-一次打开一个项目,然后关闭其他项目

[英]Accordion jQuery - Open one item at once and close others

I have created a simple accordion, currently each item is opening, but I wanted to open one item at once and close others if opened 我创建了一个简单的手风琴,当前每个项目都在打开,但是我想一次打开一个项目,如果打开则关闭其他项目

 $(".title").on("click", function(e) { e.preventDefault(); $(this).toggleClass('title-mob-minus'); // This is for icon $(this).next().slideToggle(); return false; }); 
 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> 

Change 更改

$(this).next().slideToggle();

to

$(".link-list__items").not($(this).next()).slideUp();
$(this).next().slideToggle();

 $(".title").on("click", function(e) { e.preventDefault(); $(this).toggleClass('title-mob-minus'); // This is for icon $(".link-list__items").not($(this).next()).slideUp(); $(this).next().slideToggle(); return false; }); 
 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> 

Extract your toggle logic, then when clicking an accordion, close all the open ones, and then toggle the one clicked. 提取您的切换逻辑,然后在单击手风琴时关闭所有打开的手风琴,然后切换单击的手风琴。

 function toggleTitles ($titles) { $titles.toggleClass('title-mob-minus'); // This is for icon $titles.next().slideToggle(); } var $allTitles = $(".title").on("click", function(e) { e.preventDefault(); // collapse all the other accordions that are open toggleTitles($allTitles.not(this).filter('.title-mob-minus')); // toggle this accordion toggleTitles($(this)); }); 
 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> 

 $(".title").on("click", function(e) { e.preventDefault(); $(this).toggleClass('title-mob-minus'); // This is for icon //hide all list-items $(".link-list__items").hide(); //show sibling list items $(this).next().slideToggle(); return false; }); 
 .link-list { float: left; width: 100%; margin-bottom: 10px; } .title { float: left; width: 100%; } .link-list__items { float: left; width: 100%; display: none; } .link-list__items ul { margin: 0; padding: 0; list-style: none; } .link-list__items ul li { list-style: none; display: block; padding-left: 10px; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion One</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> <div class="link-list"> <div class="title" role="heading"> <a href="javascript:;">Accordion Two</a> </div> <div class="link-list__items" style="display: none;"> <ul role="menu"> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> <li><a href="#">Accordion Inner Item</a></li> </ul> </div> </div> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM