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