Facebook喜欢弹出设置菜单jQuery和CSS

Question

I am preparing a menu facebook style. I encode is running smoothly. But when I click the drop-down menu remains open in other userposts. I want to get a diverse menu of each post. not associated with each other. What do I need it to be?

This is demo jsfiddle

HTML CODE:

<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 code:

.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;
            }

and Javascript code :

$(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

You have to get the current user target. You can get this with the user click event: 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');

        }

    });

This sure could be more elegant, but you get the idea.

If you want to close one element, on click outside, you will have to add a event listener to the document and listen, if the event was outside of the desired element. There is a plugin for that: 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");
});

Demo: http://jsfiddle.net/pu7NQ/16/

You should really consider, adding a close/open function to get rid of the code duplication.