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>

JQUERY

$(function() {

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

    });
        });

我想通过选中checkbox或输入textbox中的内容，在选择服务后点击页面上的任意位置时隐藏切换div。

这是我的小提琴here

您的意见和建议表示赞赏

提前谢谢!!!

Answer 1

使用此

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

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

选中此Fiddle

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

您可以将click事件处理程序绑定到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');
  });

这是fiddle

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

4 个答案: