Jquery和css单击打开菜单并显示活动菜单

Question

我尝试制作像facebook通知菜单一样的jquery下拉菜单。但是我的javascript代码存在一个问题。

这是我的JSFiddle示例。我的问题是当我点击菜单打开但菜单有一个图标，例如像facebook。单击通知菜单图标时Facebok通知自动为白色但是当您单击其他区域图标时颜色不同。我只想改变背景颜色。但如果您查看此链接，您可以了解我的问题是什么。 这是我的HTML代码：

<div class="msdv">
    <a class="account"><span></span></a>

<div class="bubble">
       <div class="xstr"><div class="gks">lorem</div><div class="yms">lorem</div></div>
       <div class="xstrs">
     <ul class="root">
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">lorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremloremloremloremloremlorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremloremloremloremloremloremlorem.</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremloremloremloremloremloremlorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremloremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">lorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremloremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremloremloremloremlorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremloremloremloremloremloremloremlorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremloremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremloremloremloremloremloremloremlorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremloremloremloremloremloremloremloremloremlorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">loremlorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>
         <li><a href="#mesajınızvar" role="button">
         <div class="usrxmsg">
           <div class="xtreaimage"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t5/1115776_100001145177906_1788754675_q.jpg" width="50" height="50" /></div>
           <div class="msinf">
           <div class="msisndoknk">
           <div class="msis">loremloremlorem</div>
           <div class="msisok"></div>
           </div>
             <div class="mxsg">lorem</div>
             <div class="msdtm">14:38</div>
           </div>

         </div></a>
         </li>

    </ul>
    </div>

    <div class="xstrdob">loremloremlorem</div>

</div>
</div>

这也是我的Css代码：

.msdv {
    float:left;
    width:30px;
    height:40px;
    background-color:#2a3542;
    color:#fff;
    text-align:center;
    line-height:40px;
    margin-left:130px;
}
.bubble 
{
    float:left;
position: relative;
width: 330px;
height: auto;
padding: 0px;
border:1px solid #d8dbdf;
background: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
    margin-top:50px;
    margin-left:-87px;
    display:none;
-webkit-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
-moz-box-shadow:    0px 10px 16px 0px rgba(46, 50, 50, 0.47);
box-shadow:         0px 10px 16px 0px rgba(46, 50, 50, 0.47);
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #e7eaee transparent;
display: block;

width: 0;
z-index: 1;
top: -14px;
left: 134px;

}
.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -15px;
left: 134px;

}

.msdv ul li a {
    width:325px;
    height:50px;
    color:#000;
    display:block;
    font-family:arial;
    font-weight:bold;
    padding:3px 2px;
    cursor:pointer;
    text-decoration:none;
    border-bottom:1px solid #d8dbdf;
}
.msdv ul li a:hover {
    background:#edeff4;
    color:#000;
    text-decoration:none;
}
a.account {
font-size: 16px;
line-height: 40px;
color: #fff;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(../icons/arrow3.png) 1px 9px no-repeat;

cursor:pointer;
}

.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 1px 0 0 0px;
border-top:1px solid #d8dbdf;


}
.xstr {
    background:#e7eaee;
    height:30px;
    line-height:30px;
    border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    border: 0px solid #d8dbdf;
    text-align:left;
    color:#333333;
    text-indent:7px;
    font-weight:bold;
    font-size:12px;
    }
.bubble.xstr {
    width:285px;
    height:5px;
    text-align:left;
    }
.gks {
    float:left;
    text-align:left;
    width:135px;
    }
.bubble.gks{
    height:30px;
    line-height:30px;

    }
.yms{
    float:right;
    color:#4e69a2;
    text-align:left;
    text-indent:35px;
    width:150px;
    font-size:13px;
    font-weight:normal;
    }
.xstr.yms{
    float:left;

    height:30px;
    line-height:30px;

    }
.xstrdob{
    background:#e7eaee;
    height:30px;
    line-height:30px;
    border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;
    -webkit-border-radius: 0px 0px 3px 3px;
    border: 0px solid #d8dbdf;
    -webkit-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
    -moz-box-shadow:    0px -3px 2px 0px rgba(46, 50, 50, 0.14);
    box-shadow:         0px -3px 2px 0px rgba(46, 50, 50, 0.14);
    color:#3b5998;
    font-size:13px;
    font-weight:bold;
    }
.bubble.xstrdob{
   width:285px;
   margin: 0 auto;

    }
.xstrs{
    overflow-y: scroll;
    height:400px;
    }
.bubble.xstrs {
    float:left;
    width:280px;
    }
.bubble.xstrs::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 2px;
    background-color: #F5F5F5;
}

.bubble.xstrs::-webkit-scrollbar
{
    width: 2px;
    background-color: #F5F5F5;
}

.bubble.xstrs::-webkit-scrollbar-thumb
{
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
.usrxmsg{
    float:left;
    width:315px;
    height:50px;
    }
.xtreaimage{
    float:left;
    width:50px;
    height:50px;
    background-color:#0000;
    }
.msinf{
    float:left;
    width:265px;
    height:50px;
    text-align:left;
    }
.msisndoknk{
    float:left;
    width:265px;
    height:15px;
    }
.msis{
    float:left;
    width:252px;
    height:15px;
    color:#333333;
    line-height:15px;
    text-indent:10px;

    }
.msisok{
    float:left;
    width:13px;
    height:15px;
    background-image:url(../icons/okundu.png);
    background-repeat:no-repeat;
    }
.mxsg{
    float:left;
    width:265px;
    height:18px;
    text-indent:10px;
    line-height:18px;
    font-weight:normal;
    color:#808080;
}
.msdtm{
    float:left;
    width:265px;
    height:18px;
    text-indent:10px;
    line-height:18px;
    font-weight:normal;
    color:#808080;
    }
.msdv.open .account { 
                cursor: pointer;
                width: auto;
                display: inline-block;
                padding-left: 7px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-right: 22px;
                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;
            }
            .msdv.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;
            }
            .msdv .account img {
                height: 14px; 
                margin-top: 1px;
                margin-bottom: 1px;
                float: left; 
                margin-right: 5px; 
            }

以及javascript函数代码的最后一次在此处：

$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');

if(X==1)
{
$(".bubble").hide();
$(this).attr('id', '0');    
}
else
{

$(".bubble").show();
$(this).attr('id', '1');
}

});

//Mouseup textarea false
$(".bubble").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});


//Textarea without editing.
$(document).mouseup(function()
{
$(".bubble").hide();
$(".account").attr('id', '');
});


    $(function(){
                $('.msdv').each(function(){
                    $(this).find('.account').bind('click',function(){
                        if($(this).parent().hasClass('open')){
                            $(this).parent().removeClass('open');
                        }else{
                            $('.account.open').removeClass('open');
                            $(this).parent().addClass('open');
                        }
                    });    
                });
                $('.msdv li').each(function(){
                    $(this).bind('click',function(){  
                        $('.account.open').removeClass('open');
                    });
                });
                $(document).on('click', function(e) {
                    var $clicked = $(e.target);
                    if (!$clicked.parents().hasClass("msdv")){
                        $('.account.open').removeClass('open');
                    }
                });
            });
    });

Answer 1

对我而言，取代
$('.account.open').removeClass('open'); 与$('.msdv').removeClass("open"); 够了：

$(document).on('click', function(e) {
   var $clicked = $(e.target);
   if (!$clicked.parents().hasClass("msdv")){
       $('.msdv').removeClass("open");
  }
});

Answer 2

您可以简单地将$('.msdv').removeClass("open");添加到文档点击事件的末尾，如下所示：

$(document).on('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("msdv")){
         $('.account.open').removeClass('open');
         $('.msdv').removeClass("open");
    }
});

Answer 3

你的问题是css代码在这里尝试这个。

.msdv {
    float:left;
    width:30px;
    height:40px;
    background-color:#2a3542;
    color:#fff;
    text-align:center;

}
.bubble 
{
    float:left;
position: relative;
width: 330px;
height: auto;
padding: 0px;
border:1px solid #d8dbdf;
background: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
    margin-top:50px;
    margin-left:-87px;
    display:none;
-webkit-box-shadow: 0px 10px 16px 0px rgba(46, 50, 50, 0.47);
-moz-box-shadow:    0px 10px 16px 0px rgba(46, 50, 50, 0.47);
box-shadow:         0px 10px 16px 0px rgba(46, 50, 50, 0.47);
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #e7eaee transparent;
display: block;

width: 0;
z-index: 1;
top: -14px;
left: 134px;

}
.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -15px;
left: 134px;

}

.msdv ul li a {
    width:325px;
    height:50px;
    color:#000;
    display:block;
    font-family:arial;
    font-weight:bold;
    padding:3px 2px;
    cursor:pointer;
    text-decoration:none;
    border-bottom:1px solid #d8dbdf;
}
.msdv ul li a:hover {
    background:#edeff4;
    color:#000000;

}
a.account {
font-size: 16px;
line-height: 40px;
color: #fff;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(../icons/arrow3.png) 1px 9px no-repeat;

cursor:pointer;
}

.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 1px 0 0 0px;
border-top:1px solid #d8dbdf;


}
.xstr {
    background:#e7eaee;
    height:30px;
    line-height:30px;
    border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    border: 0px solid #d8dbdf;
    text-align:left;
    color:#333333;
    text-indent:7px;
    font-weight:bold;
    font-size:12px;
    }
.bubble.xstr {
    width:285px;
    height:5px;
    text-align:left;
    }
.gks {
    float:left;
    text-align:left;
    width:135px;
    }
.bubble.gks{
    height:30px;
    line-height:30px;

    }
.yms{
    float:right;
    color:#4e69a2;
    text-align:left;
    text-indent:35px;
    width:150px;
    font-size:13px;
    font-weight:normal;
    }
.xstr.yms{
    float:left;

    height:30px;
    line-height:30px;

    }
.xstrdob{
    background:#e7eaee;
    height:30px;
    line-height:30px;
    border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;
    -webkit-border-radius: 0px 0px 3px 3px;
    border: 0px solid #d8dbdf;
    -webkit-box-shadow: 0px -3px 2px 0px rgba(46, 50, 50, 0.14);
    -moz-box-shadow:    0px -3px 2px 0px rgba(46, 50, 50, 0.14);
    box-shadow:         0px -3px 2px 0px rgba(46, 50, 50, 0.14);
    color:#3b5998;
    font-size:13px;
    font-weight:bold;
    }
.bubble.xstrdob{
   width:285px;
   margin: 0 auto;

    }
.xstrs{
    overflow-y: scroll;
    height:400px;
    }
.bubble.xstrs {
    float:left;
    width:280px;
    }
.bubble.xstrs::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 2px;
    background-color: #F5F5F5;
}

.bubble.xstrs::-webkit-scrollbar
{
    width: 2px;
    background-color: #F5F5F5;
}

.bubble.xstrs::-webkit-scrollbar-thumb
{
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
.usrxmsg{
    float:left;
    width:315px;
    height:50px;
    }
.xtreaimage{
    float:left;
    width:50px;
    height:50px;
    background-color:#0000;
    }
.msinf{
    float:left;
    width:265px;
    height:50px;
    text-align:left;
    }
.msisndoknk{
    float:left;
    width:265px;
    height:15px;
    }
.msis{
    float:left;
    width:252px;
    height:15px;
    color:#333333;
    line-height:15px;
    text-indent:10px;

    }
.msisok{
    float:left;
    width:13px;
    height:15px;
    background-image:url(../icons/okundu.png);
    background-repeat:no-repeat;
    }
.mxsg{
    float:left;
    width:265px;
    height:18px;
    text-indent:10px;
    line-height:18px;
    font-weight:normal;
    color:#808080;
}
.msdtm{
    float:left;
    width:265px;
    height:18px;
    text-indent:10px;
    line-height:18px;
    font-weight:normal;
    color:#808080;
    }
.msdv.open .account { 
                cursor: pointer;
                width: auto;
                display: inline-block;
                padding-left: 7px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-right: 22px;
                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;
            }
            .msdv.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;
            }
            .msdv .account img {
                height: 14px; 
                margin-top: 1px;
                margin-bottom: 1px;
                float: left; 
                margin-right: 5px; 
            }

我相信你可以做其他格式化。这就是你要找的东西吗？

Answer 4

我已经简化了你的jsfiddle以更好地理解它。在这个小提琴中，如果你点击图标它会弹出菜单，如果你再次点击背景或图标，它就会消失。这是你想要的吗？

jsFiddle

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


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

    }

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

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

 });