Question

我是JS的新手，我不知道如何再次单击时（或是否单击了其他任何按钮，如使菜单出现的按钮）关闭子菜单。

With this thread here on Stackoverflow我在单击父项时设法打开了子菜单，但是如何再次单击来关闭子菜单？我在Google上找到的其他主题完全没有帮助我...

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>

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

1 个答案: