Question

我已经为通知菜单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应该如何使这个工作？

Answer 1

请参阅此版本的更新小提琴：http://jsfiddle.net/3ho7ommm/4/

以上做了以下内容：

显示#notificationContainer并在您点击链接1
显示＃notificationContainer2并在您点击链接2
当您单击文档上的任何位置时，隐藏#notificationContainer和＃notificationContainer2（就像您已经完成的那样）

虽然有一些问题。你有太多的ID - 你应该使用类不止一次出现在页面上的任何东西（#notificationTitle，#notificationBody，＃noticeFooter），你可以用更简单，更清晰的方式编写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();
});

这是我的版本的工作方式：http://jsfiddle.net/abLku7e1/

希望有所帮助：）

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

1 个答案: