javascript - 再次单击时如何折叠子菜单

Question

我对 JS 比较陌生，我不知道再次单击时如何关闭子菜单(或者单击其他任何内容，例如显示菜单的按钮。

With this thread here on Stackoverflow我设法在单击父菜单时打开子菜单，但如何通过再次单击它来再次关闭它？我通过谷歌找到的其他线程根本没有帮助我......

HTML

<ul id="menu">

 <li><a href="#">Home</a></li>
 <li><a href="#">In the news</a>

    <ul>
      <li><a href="#">Youtube</a></li>
      <li><a href="#">Blog</a></li>

    </ul>
 </li>

 <li><a href="#">Who's Who?</a>
     <ul>
       <li><a href="#">Youtube</a></li>
       <li><a href="#">Tackle Hunger Tackle  Hunger</a></li>
    </ul>
</li>
 <li><a href="#">Services Offered</a></li>

JS

    function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(

function() {
    $('#menu ul').hide('normal');
    $(this).next().slideToggle('normal');

});
}



$(document).ready(function() {
    initMenu();
});

当我再次单击它时，它会关闭然后再次打开...非常感谢您帮助我解决这个问题!

Here is also the jsfiddle of the other thread

Answer 1

只需添加一个 if 并检查下一个元素是否隐藏。如果没有 if，您将通过单击同一元素触发隐藏和显示两次。

function initMenu() {
    $('#menu ul').hide();
    $('#menu li a').click(function() {
        $('#menu ul').hide('normal');
        // check if the next element is hidden
        if($(this).next().is(":hidden")) {
            $(this).next().slideToggle('normal');
        }
    });
}
$(document).ready(function() {
    initMenu();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">In the news</a>

        <ul>
          <li><a href="#">Youtube</a></li>
          <li><a href="#">Blog</a></li>

        </ul>
     </li>

     <li><a href="#">Who's Who?</a>
         <ul>
           <li><a href="#">Youtube</a></li>
           <li><a href="#">Tackle Hunger Tackle  Hunger</a></li>
        </ul>
    </li>
     <li><a href="#">Services Offered</a></li>
 </ul>