如何一次只打开1个手风琴 [英] How to open only 1 accordion at one time

问题描述

 <代码> $('.accordion').on('click'，'.accordion-control'，function(e){e.preventDefault();$(这个).next('.accordion-panel').not(':animated').slideToggle();}); 

 < ul class ="accordion">< li>< button class =手风琴控制">/lt;/button>< div class =手风琴面板">< p> Lorem ipsum dolor坐着，安全地服从精英，seu do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 p 
 p 
 p 
 p 
 p 
 p 
和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</div></li>< li>< button class =手风琴控制">/lt;/button>< div class =手风琴面板">< p> Lorem ipsum dolor坐着，安全地服从精英，seu do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 p 
 p 
 p 
 p 
 p 
 p 
和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</div></li></ul> 

我的手风琴工作正常.但我希望它像用户一次只能打开一架手风琴一样.当一个手风琴打开时，用户无法打开另一只手风琴.这是简单的jQuery，不使用其他库或框架.我还包含了我的HTML文件的一部分，您可以看看.

解决方案

只需关闭所有窗口，然后打开用户单击的窗口即可.

  $('.accordion-control').click(function(){$(.accordion-panel").slideUp();$(this).next('.accordion-panel').slideToggle();});  

 < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>< ul class ="accordion">< li>< button class ="accordion-control">某事</button>< div class ="accordion-panel">< p> Lorem ipsum dolor坐着，安全地服从精英，seu do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 p 
 p 
 p 
 p 
 p 
 p 
和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</div></li>< li>< button class ="accordion-control">某事</button>< div class ="accordion-panel">< p> Lorem ipsum dolor坐着，安全地服从精英，seu do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.尽量不要抽烟，不要因抽烟而锻炼.Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 p 
 p 
 p 
 p 
 p 
 p 
和pp，pf，fp，fp，fp，fp，pb，pb，pb，p3，p3，p3，p3，p3，p3，p3，p3，p3，p3和p3的数量均不相同.</div></li></ul>  

与此相关的内容: JS slideToggle关闭其他打开的div

$('.accordion').on('click', '.accordion-control', function(e){
    e.preventDefault();
    $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
});

<ul class="accordion">
        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>

        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>
</ul>

My accordion is working just fine. But i want it to be like the user can only open one accordion at once. When one accordion is open the user cannot open another accordion. This is simple jQuery, no other libraries or frameworks are used. I have also included some part of my HTML file you can have a look.

解决方案

Just close all of them and open the one that the user click on:

$('.accordion-control').click(function(){
   $(".accordion-panel").slideUp();
   $(this).next('.accordion-panel').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>

        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>
</ul>

This SO relate: JS slideToggle close other open divs

这篇关于如何一次只打开1个手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！