jQuery简单下拉菜单

问题描述：

我想使用jQuery进行简单的下拉菜单，该菜单在鼠标单击时打开并关闭鼠标单击或单击文档上的单击。我有以下的JS代码，使其工作。请参阅我的代码在http://jsfiddle.net/4mCsy/1/。但代码不工作： -jQuery简单下拉菜单

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; 

}

请告诉我，我该怎么错在何处。任何帮助将不胜感激。

答

$(".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

不错的答案.. （+1），但下拉关闭点击下拉本身，我不想。另外，我想下拉关闭文件点击 – h2O

是的demo2，div'。drpdwn'超出'.notification' div –

答

他们已经取得了一点做到这一点在最近的jQuery的版本：如果您希望排除下拉本身，这是由于切换是.drpdwn孩子成员

jQuery toggle()

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

.notification，你不得不排除它从一个给定的条件 - 我宁愿从event.target做到这一点。

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

Demo

否则你不得不因为如前所述，他们是彼此的成员，两个<div>的分离。因此，当您点击.notification时，jQuery选择器将会侦听到<div>。为了防止这种情况，如下调整你的HTML：

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

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

不错的答案。（+ 1），但是，下拉关闭上点击下拉本身，我不想。另外，我想下拉关闭文件点击 – h2O

编辑答案排除drpdown :) – MackieeE

@BenLind还有什么我可以帮忙吗？：0 – MackieeE

答

你会写为现在的你只说明你需要点击但不关闭时打开下拉菜单。因此，您可以使用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简单下拉菜单

相关推荐