我已经为通知菜单Facebook notification menu下载了一些脚本,它可以正常工作,但是我想做的是创建另一个链接,因此当您单击该链接时,此当前通知将关闭,而另一个通知将被打开。而且,当您单击该文档时,通知也会被关闭(PS,这在现有代码中现在有效)
当您单击friendrequest,消息或您的个人资料时,它应该像facebook菜单一样工作。
<span class="menuoptions active">
<div style="position: relative;">
<div id="notification_li"></div>
<a href="#" id="notificationLink">
<div class="counter">22</div>
Click here to show options
</a>
<div id="notificationContainer">
<div id="notificationTitle">Messages</div>
<div id="notificationsBody" class="notifications">
Notification goes here
</div>
<div id="notificationFooter"><a href="#">See All</a></div>
</div>
</div>
</div>
当前正在使用的jQuery代码是:
$(document).ready(function()
{
$("#notificationLink").click(function()
{
$("#notificationContainer").fadeToggle(300);
return false;
});
//Document Click
$(document).click(function()
{
$("#notificationContainer").hide();
});
//Popup Click
$("#notificationContainer").click(function()
{
return false
});
});
jquery看起来应该如何使这项工作?
最佳答案
查看您的版本的更新小提琴:http://jsfiddle.net/3ho7ommm/4/
上面执行以下操作:
单击链接1时显示#notificationContainer并隐藏#notificationContainer2
单击链接2时显示#notificationContainer2并隐藏#notificationContainer
单击文档上的任何位置时(如您已经完成的操作),同时隐藏#notificationContainer和#notificationContainer2
虽然有一些问题。您的ID太多-您应该对所有出现在页面上的任何东西都使用类(#notificationTitle,#notificationBody,#notificationFooter),并且可以使用一些更简单,更简洁的方法来编写JS。这是我的处理方式:
HTML:
<div class="menu">
<div class="link">
<a href="#">Link 1</a>
<div class="dropdown">
Content for dropdown 1
</div>
</div>
<div class="link">
<a href="#">Link 2</a>
<div class="dropdown">
Content for dropdown 2
</div>
</div>
</div>
CSS:
.link {
display: inline-block;
position: relative;
float: right;
}
.link a {
padding: 10px;
}
.link .dropdown {
display: none;
position: absolute;
top: 20px;
right: 0px;
color: white;
background: #999;
height: 200px;
width: 200px;
padding: 20px;
border: 1px solid red;
}
jQuery的:
// When .link a is clicked. You used .click(), I used .on("click")
$('.link a').on("click", function(e){
// Prevent link being followed (you can use return false instead)
e.preventDefault();
// Hide all other .dropdown divs
$(this).parent('.link').siblings().children('.dropdown').fadeOut();
// Toggle current .dropdown
$(this).siblings('.dropdown').fadeToggle();
});
这是我的版本的有效jsfiddle:http://jsfiddle.net/abLku7e1/
希望有帮助:)