1

展開/折りたたみボタン (#client-select) とドロップダウン メニュー (.client-select-dd) で構成されるメニュー ドロップダウンがあります。メニュー自体は、特にボタンをもう一度クリックするのではなく、ユーザーがメニューの外のどこかをクリックした場合にも折りたたむことができるようにすることを除いて、うまく機能します。

最初はメニューが折りたたまれているため、最初のクリックでメニュー ボタンの背景が変更され (#client-select)、ドロップダウン オプションが表示されます (.client-select-dd)。この最初のクリックでも、本体にクラスが追加されます (.client-deactivate)。(#client-select) をもう一度クリックすると、メニューが折りたたまれ、ボタンの画像の背景が復元されます。

私の考えでは、メニューが開いている (そしてクラス ".client-deactivate" がある) ときに本文をクリックすると、メニューが折りたたまれて .client-deactivate が削除されますが、本文をクリックしても何も起こりません。皆様のご協力に感謝いたします。

$("#client-select").click (function() {
  $("body").toggleClass("client-deactivate");
  $(".client-select-close").toggleClass("client-select-open");
  $(".client-select-dd").toggle();
});

$(".client-deactivate").click (function() {
  $(".client-select-open").toggleClass("client-select-close");
  $(".client-select-dd").toggle();
});
4

2 に答える 2

3

理解した：

$("#client-select").live ('click', function() { $("#client-select").addClass("client-select-open"); $("#client-select") .removeClass("client-select-close"); $(".client-select-dd").css("display", "block"); $("body").addClass("client-deactivate") ; });

$(".client-deactivate").live('click', function() {
  $("#client-select").removeClass("client-select-open");
  $("#client-select").addClass("client-select-close");
  $(".client-select-dd").css("display", "none");
  $("body").removeClass("client-deactivate");
});
于 2011-01-24T19:57:20.937 に答える
0

これは、クリックハンドラーがブラウザーによって最初に読み取られたときに、bodyタグに「.client-deactivate」クラスがないためと考えられます。また、本文をクリックしたときに何も切り替えたくない場合は、メニューが折りたたまれて本文をクリックするとメニューが展開されるためです。メニューがすでに開いている場合にのみ、ボディクリックハンドラーでメニューを閉じたいと思います。

2番目のクリックハンドラーを次のように変更してみてください。

$("body").click(function() {
  if($("body").hasClass("client-deactivate") {
    $(".client-select-open").toggleClass("client-select-close");
    $(".client-select-dd").toggle();
    $("body").removeClass("client-deactivate");
  }
});

また、本文をクリックしてもメニューが展開されないようにするために、これらのトグル関数をremoveClassに置き換えることを検討することもできます...別の関数がメニューを折りたたむが、「client-deactivate」クラスを削除しない場合のように本体に移動し、本体をクリックすると、クラス名が残り、上記のコードを実行して、メニューを開いた位置に切り替えます。

于 2011-01-22T00:00:52.463 に答える