Javascript Onclick显示菜单链接，但它从不消失_Javascript_Menu_Onclick

Javascript Onclick显示菜单链接，但它从不消失

javascript menu

Javascript Onclick显示菜单链接，但它从不消失,javascript,menu,onclick,Javascript,Menu,Onclick,我想点击“水果”并显示列表。然而，当我现在点击“水果”时，我的水果列表出现了，但从来没有出现过。当我点击下一个链接“蔬菜”时，水果会消失，但现在蔬菜不会消失，即使我点击屏幕上的其他地方或移动鼠标 $('.menuBar div ul li').click(function() { $('.menuBar div').hide(); }); function showHideMenu( elem ) { $('.menuBar div').each( function ()

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

$('.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

果

水果清单在哪里？在数组或对象中，是否不需要再次调用showHideMenu函数？单击body事件和单击target（目标）而不是菜单时，菜单应隐藏。虽然代码似乎正确，但我缺少指示“mouseout”事件隐藏水果列表的其他代码。

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