Facebook喜欢弹出窗口设置菜单jquery和css

Facebook like popover setting menu jquery and css

本文关键字：菜单 jquery css 设置 窗口 喜欢 Facebook      更新时间：2023-09-26

我正在准备一个菜单facebook风格。我的编码运行得很顺利。但是当我点击下拉菜单时，在其他用户帖子中仍然打开。我想要每个帖子都有不同的菜单。彼此没有关联。我需要它是什么?

这是demo

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');
        }
      }
});
});

您必须获得当前用户目标。你可以通过用户点击事件得到这个: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/

你真的应该考虑添加一个close/open函数来消除代码重复。

相关文章：