0

我正在尝试使用 jQuery 制作一个简单的下拉菜单，该下拉菜单在鼠标单击时打开并在鼠标单击或单击文档时关闭。我有以下 JS 代码来完成这项工作。请参阅我在http://jsfiddle.net/4mCsy/1/上的代码。但是代码不起作用：-

var x=0;
if(x==0){
    $(".notification").click(function(){
        $(".drpdwn").css("display","block");
    });
    x=1;

}
if(x==1){
    $(".notification").click(function(){
        $(".drpdwn").css("display","none");
    });
    x=0;

}

但是，当我将代码更改为以下（删除代码的下半部分）（http://jsfiddle.net/4mCsy/2/）时，代码部分仅在打开下拉列表时起作用。但不关闭（显然）：-

var x=0;
if(x==0){
    $(".notification").click(function(){
        $(".drpdwn").css("display","block");
    });
    x=1;

}

请告诉我哪里出错了。任何帮助将不胜感激。

4

3 回答 3

2

他们在最近的 jQuery 版本中做了一点点：

jQuery 切换（）

$(document).on('click', '.notification', function() {
    $('.drpdwn').toggle(); 
});

如果您希望排除下拉列表本身，因为它.drpdwn是 的子成员而切换.notification，您必须从给定条件中排除它 - 我更喜欢从event.target.

$(document).on('click', '.notification', function( event ) {
   if ( event.target.className != 'drpdwn' )
       $('.drpdwn').toggle();
});

演示

否则，您必须将两者分开，<div>因为如前所述，它们是彼此的成员。<div>因此，当您单击 时，jQuery 选择器将同时监听这两个s .notification。为防止这种情况，请按如下方式重组您的 HTML：

<!-- Notification Click -->
<div class="notification">
    Notification
</div>

<!-- Dropdown Div -->
<div class="drpdwn">
</div>
于 2013-10-02T10:40:56.160 回答
1 
$(".notification").on('click',function(){
  $(".drpdwn").toggle();
});

演示

更新：

<div class="notification">Notification</div>
<div class="drpdwn"></div>
$(".notification").on('click', function () {
    $(".drpdwn").toggle('slow');
});

演示 2

于 2013-10-02T10:46:03.703 回答
0

您现在要写的是，您只指定在单击而不是关闭时需要打开下拉列表。因此，您可以使用toggle()来打开和关闭下拉菜单。

<div class="notification">Notification</div>
<div class="drpdwn"></div>
$(".notification").on('click',function(){
     $(".drpdwn").toggle('blind', 'options', 500 );
});

这是它的链接：http: //jsfiddle.net/coolshivster/4mCsy/25/

于 2013-10-02T12:28:35.873 回答