3

サンプルコードはこちら: http://codepen.io/vincentccw/pen/loAwu

基本的に私がやりたいことは、タグを使用してカスタム ドロップダウン リストを作成することですが、div ボタンは置き換え可能です。

私の問題は、divをクリックするとカスタムクラスが追加されます(ドロップダウンリストが表示されます)が、2回目に他の場所をクリックすると、クラスを削除して元の状態に戻したいです。どうすればいいですか？

$(function(){ 

$(".dButton").click(function(){
   $("div ul.customDropDownList").addClass("clickButtonReveal");
});     
$('body').click(function(){
if( $("div ul.customDropDownList").hasClass("clickButtonReveal") ){
      alert("remove class");
      $("div ul.customDropDownList").removeClass("clickButtonReveal");
      };
    });
});

今のところ、両方のクリック機能が同時にトリガーされます....

4

4 に答える 4

4

ボタンのクリックで伝播を停止することができます：

$(".dButton").click(function (e) {
    e.stopPropagation();
    $("div ul.customDropDownList").addClass("clickButtonReveal");

});
于 2013-06-17T10:47:54.983 に答える
4

これを試してください

$(".dButton").click(function (e) {
    e.stopPropagation();
    $("div ul.customDropDownList").addClass("clickButtonReveal");

});

以下の内容を更新しました：

詳細については

于 2013-06-17T10:49:42.377 に答える
0

jQuery の one() 関数を使用して、ユーザーがページの本文をクリックしたときに削除する必要があるものをすべて削除します。one() は一度だけトリガーします...コードを次のように変更します。

$(".dButton").click(function(){
  $("div ul.customDropDownList").addClass("clickButtonReveal");
  $('body').one(function(){
    $("div ul.customDropDownList").removeClass("clickButtonReveal")
  });
});

明確でない場合に備えて:$('body').click(function(){...})コード内の 2 番目の関数を削除します。これにより、すべてのコードが置き換えられます。

于 2013-06-17T10:44:31.060 に答える