Question

我有一组可以切换的课程。代码是这样的：

$(".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>

这很好但是要关闭每个切换（窗体弹出窗口），你必须再次点击它各自的form-btn。如何更改jquery以便在单击任何位置时关闭表单弹出窗口？

由于

Answer 1

当您单击文档上的任何位置而不是实际弹出窗口时，以下代码将使您的.form-popup容器消失。

$(document).mouseup(function (e){ 
    var formPopup = $(".form-popup");
    if (!formPopup.is(e.target) && formPopup.has(e.target).length === 0) {
        $('.formPopup').hide();
    }
});

Answer 2

您可以将监听器附加到您的身体，以便在用户点击外部时关闭：

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

这将关闭所有弹出窗口。

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

如果点击在弹出窗口中，为了避免关闭它，感谢亚特史密斯的抬头。

单击关闭时如何关闭切换元素？

2 个答案: