简体   繁体   English

需要在浏览器中的任何位置单击关闭div - jquery

[英]Need to close the div on clicking anywhere in the browser - jquery

Using CSS and Jquery i made a drop down like thing. 使用CSS和Jquery我做了一个下拉式的东西。 (So that i can theme that thing according to my other sites). (所以我可以根据我的其他网站主题那个东西)。

My problem is when i click on the div it list the things and when i click within the particular div it is closing. 我的问题是,当我点击div它列出的东西,当我点击特定的div它正在关闭。 Else it doesn't closing. 否则它没有关闭。 It's always open. 它总是开放的。

It should not be always open. 它不应该总是开放的。

What should i want to do if the user clicks outside then the drop down thing must close or hide or display none... whatever.... 如果用户点击外面,我应该怎么做,然后下拉的东西必须关闭或隐藏或显示无......等等......

Any ideas will be grateful.... 任何想法都会感激不尽......

thanks in advance.... 提前致谢....

<html>
    <head>
        <title>JQUERY TEST</title>
    </head>
    <body>
    <script type="text/javascript">
    Drupal.behaviors.assignment_report = function (context) {
      $(".selectbox-list").click(clickSelect);
      $(".custom-selectboxes-replaced-list li").click(clickSelectedItem);
    }

    function clickSelect() {
      $(".custom-selectboxes-replaced-list").toggle();
    }

    function clickSelectedItem() {
      var $ul = $(this).closest('ul');
      var curr_ul_class = ($ul.attr('class')); // ul class
      var curr_div_class = ($ul.prev().attr('class')); // div class
      if(curr_ul_class == 'custom-selectboxes-replaced-list' || curr_div_class == 'selectbox-list') {
        $(".selectbox-list").html($(this).html());
        $(".custom-selectboxes-replaced-list").toggle();
      }
    }
    </script>
    <div class="selectbox-list">
        <div class="topic-list-two">All</div>
    </div>
        <ul class="custom-selectboxes-replaced-list" style="display:none">
            <li value=0>All</li>
            <li value=1>Pending</li>
            <li value=3>completed</li>
        </ul>
    </body>
    </html>

Here's the concept. 这是概念。 Div will close if mouse is clicked anywhere outside, but will not close if click is made anywhere inside it. 如果鼠标在外面的任何地方被点击,Div将关闭,但如果在其中任何地方点击鼠标,则不会关闭。

var $div = $('#div');
$(document.body).click(function(){
    if (!$div.has(this).length) { // if the click was not within $div
        $div.hide();
    }
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM