0

うまく機能するシンプルなドロップダウンメニューがありますが、ul以外の場所をクリックすると、再び閉じられるようにする方法はありますか?

Jクエリ

$('.header').click(function() {
    $('.menu').toggle();
});

HTML

<a class="header" href="#">All</a>
<ul class="menu">
    <li>All</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
4

2 に答える 2

1

トグルを toggleClass に変更し、css にアクティブまたはオープン クラスを追加します。JQuery UI を使用している場合は、アニメーションも使用できます。例えば

.menu {
display:none;
}

.menu.active {
display:block;
}

それから

$('.header').click(function(e) {
  $('.menu').toggleClass("active", 1000);
  if (!$('body').hasClass("menu-active")) {
    $('body').addClass("menu-active");
  }
});

$('body.menu-active').click(function(e) {
  $('.menu').removeClass("active");
  $('body').removeClass("menu-active");
});
于 2012-06-12T16:47:55.703 に答える
0

追加するのはどうですか：

$('.header').click(function(e) {
  e.stopPropagation();
  $('.menu').toggle();
});
$('body').click(function() {
  $('.menu').hide();
});

jsFiddle の例。

于 2012-06-12T16:46:37.073 に答える