jQuery slideToggle 跳回

Question

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

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

jQuery slideToggle 跳回

jQuery slideToggle jumps back

jquery

accordion

slidetoggle