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>

这可以正常工作，但要关闭每个切换（表单弹出），您必须再次单击其各自的表单-btn。如何更改 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();
    });

如果点击在弹出窗口中，为避免关闭它，感谢 matt smith 的提醒。

于 2013-09-30T09:41:40.363 回答