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

时间:2011-10-11 11:03:54

标签: jquery html css

使用CSS和Jquery我做了一个下拉式的东西。 (所以我可以根据我的其他网站主题那个东西)。

我的问题是,当我点击div时,它会列出所有内容,当我在特定div中单击时,它正在关闭。否则它没有关闭。它始终是开放的。

不应该一直打开。

如果用户点击外面我应该怎么做,那么下拉物品必须关闭或隐藏或显示无......等等......

任何想法都会感激不尽....

提前感谢....

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

1 个答案:

答案 0 :(得分:2)

这是概念。如果鼠标在外面的任何地方被点击,Div将关闭,但如果在其中任何地方点击鼠标,则不会关闭。

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