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

问题描述

$('.accordion').on('click', '.accordion-control', function(e){e.preventDefault();$(这个).next('.手风琴面板').not(':动画').slideToggle();});

<li><button class="accordion-control">Something</button><div class="accordion-panel"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

<li><button class="accordion-control">Something</button><div class="accordion-panel"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

我的手风琴工作正常.但我希望它就像用户一次只能打开一个手风琴一样.当一个手风琴打开时，用户不能打开另一个手风琴.这是简单的 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">Something</button><div class="accordion-panel"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

<li><button class="accordion-control">Something</button><div class="accordion-panel"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation 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.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

此 SO 相关: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屋！