javascript - Facebook 喜欢 popover 设置菜单 jquery 和 css

Question

我正在准备一个 facebook 风格的菜单。我编码运行顺利。但是当我单击下拉菜单时，其他用户帖子中的下拉菜单仍然打开。我想获得每个帖子的多样化菜单。彼此不相关。我需要它做什么？

这是演示 jsfiddle

HTML 代码:

<div class="container">
    <div class="pay_ayar">
        <a class="account"></a>
        <div class="bubble">
            <ul class="root">
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container">
    <div class="pay_ayar">
        <a class="account"></a>
        <div class="bubble">
            <ul class="root">
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
        </div>
    </div>
</div>

CSS 代码:

.container {
   float:left;
    width:500px;
    height:90px;
    border:1px solid #000;   
    margin-top:30px;
}
.pay_ayar {
    float:right;
    width:20px;
    height:25px;
    border:1px solid #000;
    display:none;
}
.container:hover .pay_ayar{
     display:block;
}
a.account{
    position:absolute;
    line-height:25px;
    width:20px;
    height:25px;
    cursor:pointer; 
    display:block;
}
.bubble{
   float:left;
    position:relative;
    width:250px;
    height:200px;
    padding:0px;
    border:1px solid #000;
    margin-top:0px;
    display:none;
    margin-left:-230px;
    top:25px;

}
.pay_ayar.open .account { 
                cursor: pointer;
                width: 20px;
                height:25px;
                display: inline-block;

                border: 1px solid #AAA;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                font-weight: bold;
                color: #717780;
                line-height: 16px;
                text-decoration: none !important;
                background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
            }
            .pay_ayar.open .account {
                border: 1px solid #3B5998;
                color: white;
                background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
                -moz-border-radius-topleft: 2px;
                -moz-border-radius-topright: 2px;
                -moz-border-radius-bottomright: 0px;
                -moz-border-radius-bottomleft: 0px;
                -webkit-border-radius: 2px 2px 0px 0px;
                border-radius: 2px 2px 0px 0px;
                border-bottom-color: #6D84B4;
            }

和Javascript代码:

$(document).ready(function()
{
    $(".account").click(function()
    {
        if($(".bubble").css('display')=='none')
        {
            $(".pay_ayar").addClass('open');
            $(".bubble").css('display','block');


        }
        else
        {
             $(".bubble").css('display','none');
             $(".pay_ayar").removeClass('open');

        }

    });
    $(document).click(function(e)
    {
      if($(e.target).attr('class')!='account')
      {

        if($(".bubble").css('display')=='block')
        {
            if($('.pay_ayar').hasClass('open'))
              {
                  $('.pay_ayar').removeClass('open');
              }
              $(".bubble").css('display','none');
        }
      }
});

});

Answer 1

您必须获取当前用户目标。您可以通过用户点击事件获得此信息: http://jsfiddle.net/pu7NQ/13/

 $(".account").click(function(event)
    {
        var $container = $(event.target).closest(".container");
        if($(".bubble", $container).css('display')=='none')
        {
            $(".pay_ayar", $container).addClass('open');
            $(".bubble", $container).css('display','block');


        }
        else
        {
             $(".bubble", $container).css('display','none');
             $(".pay_ayar", $container).removeClass('open');

        }

    });

这当然可以更优雅，但你明白了。

如果您想关闭一个元素，在外部单击时，您必须向文档添加一个事件监听器并监听，如果事件发生在所需元素之外。有一个插件:http://benalman.com/projects/jquery-outside-events-plugin/

 // add close listener
$container.on("clickoutside.outside",function(){
    $(".pay_ayar").removeClass("open");
    $(".bubble").hide();
    $(this).off("clickoutside.outside");
});

演示:http://jsfiddle.net/pu7NQ/16/

你真的应该考虑，添加一个关闭/打开函数来摆脱代码重复。