如何一次只打开 1 个手风琴

Question

$('.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>

我的手风琴工作得很好。但我希望它就像用户一次只能打开一个手风琴一样。当一个手风琴打开时，用户无法打开另一个手风琴。这个很简单jQuery，没有用到其他的库或者框架。我还包含了我的 HTML 文件的一部分，你可以看看。

Answer 1

可能你可以做的是禁用所有手风琴，每次用户点击其中一个时启用下一个。

你可以看一个例子here希望能解决你的问题。

我还提供了一个代码片段来帮助您完成前面的示例。

// Disable #x
$('.accordion').on('click', function(e){
    e.preventDefault();
    $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
    $( "#x" ).prop( "disabled", false );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x" class="form-control" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<button class="accordion">click me</button>

您尝试实现的目标也可以通过框架 bootstrap 以一种简单的方式实现，您可以通过单击 here. Bootstrap also uses jquery so if you need to costumize anything it's possible too. To download it you can click here 查看。请注意，为了 bootstrap 代码工作，您需要下载它并在 html 的头部写上正确的路径或添加此脚本：

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Answer 2

我用 prescribed jQuery UI 标记重写了您的示例输入，如此处记录：https://api.jqueryui.com/accordion/#entry-examples

您问题中的示例代码与正确的标记不匹配。

正如您在下面的工作示例中所看到的，在任何给定时间只有一个面板打开，这就是您报告的所需行为。正如我在上面的评论中提到的，这也是默认行为。

运行下面的代码片段以查看正在运行的工作版本。

$("#accordion").accordion();

<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>Something 1</h3>
  <div>
    <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>
  <h3>Something 2</h3>
  <div>
    <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>
</div>

Answer 3

只需关闭所有这些并打开用户单击的那个：

$('.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>

这就是相关的：JS slideToggle close other open divs

Answer 4

您需要关闭打开的面板。

$('.accordion').on('click', '.accordion-control', function(e) {
  e.preventDefault();
  //Close Open panel
  $(this).closest(".accordion").find(".accordion-panel:visible").slideToggle();

  $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
});

.accordion-panel {
  display: none;
}

<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>

如何一次只打开 1 个手风琴

How to open only 1 accordion at one time

html

javascript

css

jquery

accordion