Question

我正在尝试使用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;

}

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

Answer 1

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

jQuery toggle()

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

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

那样做

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

<强> Demo

否则你必须将两个<div>分开，因为如前所述，他们是彼此的成员。因此，当您单击<div>时，jQuery选择器将侦听.notification个{}。为防止这种情况，请按以下方式重新构建HTML：

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

<!-- Dropdown Div -->
<div class="drpdwn">
</div>

Answer 2

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

<强> Demo

更新：

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

Demo 2

Answer 3

您现在要写，您只需指定在点击但不关闭时需要打开下拉列表。因此，您可以使用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/

jQuery简单的下拉列表

3 个答案: