jQuery slideToggle 跳回答案

【问题标题】：jQuery slideToggle jumps backjQuery slideToggle 跳回
【发布时间】：2022-01-15 15:23:48
【问题描述】：

我将 slideToggle 用于一个简单的手风琴，但是当单击打开的手风琴关闭时，它会关闭然后跳回到打开的状态。

HTML

<div>
    <h2 class="footer-title">First title</h2>
    <ul class="footer-menu">  
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>  
        <li><a href="#">Item 3</a></li>  
    </ul>
</div>  
<div>
    <h2 class="footer-title">First title</h2>
    <ul class="footer-menu"> 
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>
<div>
    <h2 class="footer-title">First title</h2>
    <ul class="footer-menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

JAVASCRIPT

$('.footer-menu').hide();
$('.footer-title').click(function(){
    $('.footer-menu').slideUp();
    $(this).next('.footer-menu').slideToggle();
});

演示：CodePen

【问题讨论】：

标签： jquery accordion slidetoggle

【解决方案1】：

您可以根据 if 条件中的 $('.footer-menu').slideUp(); 行内的此移动来检查发生单击事件的下一个元素是否可见。

演示代码：

$('.footer-menu').hide();
$('.footer-title').click(function() {
  var isOpen = $(this).next('.footer-menu').is(":visible"); //check if the next elemnt is visible (means we are closing it)
  if (!isOpen) {
    $('.footer-menu').slideUp();
  }
  $(this).next('.footer-menu').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div>
  <h2 class="footer-title">First title</h2>
  <ul class="footer-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
<div>
  <h2 class="footer-title">First title</h2>
  <ul class="footer-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
<div>
  <h2 class="footer-title">First title</h2>
  <ul class="footer-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

【讨论】：