0

「フルーツ」をクリックしてリストを表示させたいのですが。しかし、今「果物」をクリックすると、果物のリストが表示されますが、消えることはありません。次のリンク「野菜」をクリックすると果物が消えますが、画面上のどこかをクリックしたり、マウスを動かしたりしても、野菜が消えることはありません。

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

0 に答える 0