1. 首頁
  2. 問答
  3. jquery和css點擊打開菜單並顯示活動菜單

jquery和css點擊打開菜單並顯示活動菜單

2014-02-21 175 views
0

我試圖做一個像facebook通知菜單jquery下拉菜單。但我有一個JavaScript代碼的問題。jquery和css點擊打開菜單並顯示活動菜單

這是我的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'); 
        } 
       }); 
      }); 
    });

來源

2014-02-21 somebodyknowsme

+0

你可以添加一些清晰，你的問題。當你點擊你的圖標打開你想要該圖標改變顏色的菜單時，是否存在問題？或者當菜單打開時，您希望左側的圖片改變顏色？ – jjay225

+0

@ jjay225我想改變背景顏色。當我點擊。如果你檢查我的JSFiddle，我的顏色正在工作。但是當我點擊其他區域時，最後一個顏色不會改變。 – somebodyknowsme

回答

0

我已經簡化您的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'); 
    } 
    } 
}); 

});

來源

2014-02-21 14:27:34 jjay225

+0

現在沒問題。謝謝;） – somebodyknowsme

+0

不客氣用戶:) – jjay225

0

您可以簡單地添加$('.msdv').removeClass("open");到您的文檔結束點擊事件如下：

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

來源

2014-02-21 14:00:14

+0

感謝問題已完成... – somebodyknowsme

+0

親愛的問題再次。此代碼在JSFiddle中工作，但不在localhost中工作。什麼錯我不明白？ – somebodyknowsme

+0

可能是緩存或本地環境問題，請確保所有文件的內容都是正確的並且無緩存 –

0

您的問題是與這裏的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; 
      }

我相信其他格式你可以做。這是你在找什麼？

來源

2014-02-21 14:02:07

+0

我的問題不在CSS中。當我用鼠標點擊菜單。換色菜單並打開菜單。但是當我點擊顏色改變菜單的不同區域時，它們保持不變。 – somebodyknowsme

1

對我來說，與$('.msdv').removeClass("open"); 更換
$('.account.open').removeClass('open'); 是不夠的：

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

來源

2014-02-21 14:02:20 Brice

+0

這不是解決方案先生@Brice – somebodyknowsme

相關問題

 相關問題