javascript - Onclick显示菜单链接，但它永远不会消失

我想点击“Fruit”并显示列表。然而，当我现在点击“水果”时，我的水果列表会出现，但它永远不会消失。当我点击下一个链接“蔬菜”时，水果消失，但现在即使我点击屏幕上的其他地方或移动鼠标，蔬菜也不会消失。

$('.menuBar div ul li').click(function() {
    $('.menuBar div').hide();
});

    function showHideMenu( elem ) {
   $('.menuBar div').each( function () {
    if ( $(this).hasClass('sub' + elem) ) {
        $(this).css('height','0px');
        $(this).css('display','inline-block');
        $(this).animate({
         height: '+=200'
        },'slow');
    } else {
        $(this).css('display','none');
    }
    });
}

HTML

<html>
<div class="menuBar">
   <ul> 
       <li onclick="showHideMenu('Fruit');">
           <span class="fruit"></span>Fruit
       </li>
   </ul>
</div>
</html>

Onclick显示菜单链接，但它永远不会消失

0 个答案: