0

当我在展开的 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代码

$(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。

4

4 回答 4

2

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

=> 测试 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
});

=> 或者只是面板之外的 event.target

Jsfiddle在这里

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

于 2013-10-07T08:30:11.137 回答
0

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

$(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/

于 2013-10-07T08:43:43.533 回答
0

您可以使用focusout()

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

将事件处理程序绑定到“focusout”JavaScript 事件。

在这里看小提琴

于 2013-10-07T08:26:13.480 回答
0

我使用了以下内容：

<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/

于 2019-12-16T09:36:35.067 回答