我已经下载了一些通知菜单的脚本 Facebook notification menu它工作正常,但我想做的是创建另一个链接,这样当您单击该链接时,当前通知将关闭,而另一个通知将打开。当您单击文档时,通知也将关闭(PS,这在现有代码中有效)
当您点击好友请求、消息或您的个人资料时,它应该像 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 应该是什么样子才能完成这项工作?
最佳答案
查看您版本的更新 fiddle :http://jsfiddle.net/3ho7ommm/4/
上面执行以下操作:
- 显示#notificationContainer,并隐藏#notificationContainer2(如果您点击链接 1 时打开了#notificationContainer2)
- 显示 #notificationContainer2 并隐藏 #notificationContainer(如果在您点击链接 2 时打开)
- 当您点击文档上的任意位置时,会隐藏 #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/
希望有帮助:)
关于javascript - 使用jquery显示一个div隐藏其他div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27753932/