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

Question

我已经为通知菜单下载了一些脚本 Facebook notification menu，它工作正常，但我想做的是创建另一个 link 所以当你点击 link 这个当前通知将关闭，而另一个通知将被打开。当您单击文档时，通知也将关闭（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（如果它在您单击时打开）Link 1
显示#notificationContainer2 并隐藏#notificationContainer（如果它在您单击时打开）Link 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/

希望对您有所帮助:)

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

Show one div hide others using jquery

html

javascript

jquery