0

トグルするクラスのグループがあります。コードは次のとおりです。

$(".form-btn").click(function(event) {
    event.preventDefault();
    $(this).next().toggle(0);
});

HTMLを次のように使用します。

        <div class="form-btn-wrapper">
            <div class="form-btn" id="buy-or-rent">Buy or Rent <i class="icon-caret-down"></i></div>
            <div class="form-popup radio">
                <input id="check1" type="radio" name="buy-or-rent" value="To Buy">
                <label for="check1">To Buy</label>
                <input id="check2" type="radio" name="buy-or-rent" value="To Rent">
                <label for="check2">To Rent</label>
            </div>
        </div>
        <div class="form-btn-wrapper">
            <div class="form-btn" id="price">Price <i class="icon-caret-down"></i></div>
            <div class="form-popup">
                <input type="text" name="min-price" class="small price-input" placeholder="Min" /> to <input type="text" name="max-price" class="small price-input" placeholder="Max" />
            </div>
        </div>

これは正常に機能しますが、各トグル (フォーム ポップアップ) を閉じるには、それぞれのフォーム ボタンをもう一度クリックする必要があります。どこかをクリックするとフォームポップアップが閉じるようにjqueryを変更するにはどうすればよいですか?

ありがとう

4

2 に答える 2

1

次のコードは.form-popup、実際のポップアップ自体以外のドキュメント上の任意の場所をクリックすると、コンテナーを非表示にします。

$(document).mouseup(function (e){ 
    var formPopup = $(".form-popup");
    if (!formPopup.is(e.target) && formPopup.has(e.target).length === 0) {
        $('.formPopup').hide();
    }
});
于 2013-09-30T09:41:56.503 に答える
0

リスナーを本体にアタッチして、ユーザーが外側をクリックするたびに閉じることができます。

$('body').on('click', function(){
  $('.form-popup').hide();
});

これにより、すべてのポップアップが閉じます。

 $('body').on('click', ':not(.form-popup)', function(){
      $('.form-popup').hide();
    });

クリックがポップアップ内にある場合に閉じないようにするために、マット・スミスに感謝します。

于 2013-09-30T09:41:40.363 に答える