jquery - 单击页面上的任意位置时如何隐藏切换（div）

Question

我曾经toggle隐藏/显示DIV

HTML

<div class="wrap">

  <h1 id="selectBox">Service you&#39;re interested in</h1>

  <div class="selectBox">
    <div class="selectBoxWrap">

      <ul class="selectBoxContent">
        <li><input type="checkbox" name="#" value="New Web Site" /> <span class="innerPageSelect">Website Design and Development</span></li>
        <li><input type="checkbox" name="#" value="New Web Site" /> <span>Website Maintenance</span></li>
        <li class="other">
          <p>
            <label for="other">Other</label><br />
        <input type="text" name="other" value="" id="other" />
          </p>
         </li>
       </ul> 

      </div>
    </div>
</div>

查询

$(function() {

            $('#selectBox').click(function() {
        $('.selectBoxContent').slideToggle('fast');
        return false;

    });
        });

我想要，在选择服务后单击页面上的任意位置时隐藏切换 divcheckbox或在textbox.

这是我的小提琴

感谢您的意见和建议

先感谢您！！！

Answer 1

用这个

$(document).click(function() {
 $('.selectBoxContent').slideUp('fast');
});

$(".selectBoxContent").click(function(e) { // Wont toggle on any click in the div
e.stopPropagation();
});

检查这个小提琴

Answer 2

$(function() {
    $(document).on("click", function(e) {
        if ($(e.srcElement).closest('.selectBoxWrap').length) return;
        if ($('.selectBoxContent').is(":visible")) $('.selectBoxContent').slideToggle('fast');
    });
    $('#selectBox').on("click", function(e) {
        if ($(e.srcElement).closest('.selectBoxWrap').length) return;
        $('.selectBoxContent').slideToggle('fast');
        return false;
    });
});

小提琴：http: //jsfiddle.net/TEyHC/9/

Answer 3

您可以将单击事件处理程序绑定到 html 标记：

$(function() {
    $('#selectBox').click(function() {
        $('html').click(function() {
            $(this).unbind('click');
            $('.selectBoxContent').slideToggle('fast');
        });
        $('.selectBoxContent').slideToggle('fast');
        return false;
    });
});

Answer 4

你可以这样使用

 $('html').click(function() {
       $('.selectBoxContent').slideToggle('fast');
  });

这是一个小提琴