Question

当我在扩展的div外面点击时，这个div应该关闭。

我有像

这样的HTML代码

<div id="panel">
<div>           
        <h1>Welcome to jquery demo</h1>
                <h3>Welcome to jquery demo</h3>
                <h3>Welcome to jquery demo</h3>
                <h3>Welcome to jquery demo</h3>
                <h3>Welcome to jquery demo</h3>
            </div>
</div>
<div class="tab">
            <ul class="loginleft">
            <button class="sc-button g-opacity-transition sc-button-large loginButton" tabindex="0">Log in</button>

        </ul>
        <ul class="login">
            <li class="left">&nbsp;</li>
            <li>Hello Guest!</li>
            <li class="sep">|</li>
            <li id="toggle">
                <a id="open" class="open" href="#">More Info</a>
                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>         
            </li>
            <li class="right">&nbsp;</li>
        </ul> 
    </div>

js code

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");

    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });     


    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     

});

当我点击外面的区域时，我怎么能关闭那个扩展的div。

Answer 1

您可以为文档添加处理程序，因为click事件不是“泛滥”...

=＆GT;测试event.target是否为“.close”

$(document).on('click','.close', function(eventObject){
  $('#panel').slideUp("slow"); // useful if you want to put several buttons all over the your content
});

=＆GT;或者只是面板外的event.target

Jsfiddle here

（尽量不要在文档中附加太多贪婪的处理程序，以保持浏览器快速反应。）

Answer 2

您可以使用focusout()

 $("div#panel").focusout(function(){
        $(this).slideUp("slow"); 
    });

将事件处理程序绑定到＆＃34; focusout＆＃34; JavaScript事件。

See fiddle here

Answer 3

如何在文档级别处理事件：

$(document).click(function(e){
    if (event.target.id == "open") {
        $("div#panel").slideDown("slow"); 
    }
    else if (event.target.id == "close") {
        $("div#panel").slideUp("slow"); 
    }
    else {
        $("div#panel").slideUp("slow"); 
    }
});

工作小提琴：http://jsfiddle.net/VC9eT/

Answer 4

我使用了以下内容：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>

HTML区域：

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

jQuery文档链接：

https://jqueryui.com/accordion/

如何在jquery中折叠我的div面板

4 个答案: