我已经为通知菜单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/

希望有帮助:)

07-24 09:50
查看更多