javascript - 使用jquery显示一个div隐藏其他div

Question

我已经下载了一些通知菜单的脚本 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 应该是什么样子才能完成这项工作？

Answer 1

查看您版本的更新 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/

希望有帮助:)