2017-05-28 40 views
0

下午好我對前端有些新東西的疑問是如何解決這個錯誤,當我點擊語言按鈕和另一個導航按鈕來改變它,我似乎我仍然在按鈕和我知道在懸停當李開放時仍然有顏色,在jQuery中我有我能解決的問題嗎?如何解決li按鈕之間的問題?

<ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown keep-open"> 
    <a id="dLabel" class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up" aria-expanded="false" role="button"> 
     <span class="flag-icon flag-icon-us"></span> 
    </a> 
    <ul class="dropdown-menu" role="menu"> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"> 
      <span class="flag-icon flag-icon-gb"></span> English</a> 
     </li> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"> 
      <span class="flag-icon flag-icon-fr"></span> French</a> 
     </li> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"> 
      <span class="flag-icon flag-icon-cn"></span> Chinese</a> 
     </li> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"> 
      <span class="flag-icon flag-icon-de"></span> German</a> 
     </li> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"> 
      <span class="flag-icon flag-icon-nl"></span> Dutch</a> 
     </li> 
    </ul> 
    </li> 
    <li class="dropdown"> 
    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false" data-animation="scale-up" role="button"> 
     <i class="icon wb-bell" aria-hidden="true"></i> 
     <span class="badge badge-danger up">5</span> 
    </a> 
    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu"> 
     <li class="dropdown-menu-header" role="presentation"> 
     <h5>NOTIFICATIONS</h5> 
     <span class="label label-round label-danger">New 5</span> 
     </li> 

     <li class="list-group scrollable is-enabled scrollable-vertical" role="presentation" style="position: relative;"> 
     <div data-role="container" class="scrollable-container" style="height: 270px; width: 373px;"> 
      <div data-role="content" class="scrollable-content" style="width: 358px;"> 
      <a class="list-group-item" href="javascript:void(0)" role="menuitem"> 
       <div class="media"> 
       <div class="media-left padding-right-10"> 
        <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i> 
       </div> 
       <div class="media-body"> 
        <h6 class="media-heading">A new order has been placed</h6> 
        <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time> 
       </div> 
       </div> 
      </a> 
      <a class="list-group-item" href="javascript:void(0)" role="menuitem"> 
       <div class="media"> 
       <div class="media-left padding-right-10"> 
        <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i> 
       </div> 
       <div class="media-body"> 
        <h6 class="media-heading">Completed the task</h6> 
        <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time> 
       </div> 
       </div> 
      </a> 
      <a class="list-group-item" href="javascript:void(0)" role="menuitem"> 
       <div class="media"> 
       <div class="media-left padding-right-10"> 
        <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i> 
       </div> 
       <div class="media-body"> 
        <h6 class="media-heading">Settings updated</h6> 
        <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time> 
       </div> 
       </div> 
      </a> 
      <a class="list-group-item" href="javascript:void(0)" role="menuitem"> 
       <div class="media"> 
       <div class="media-left padding-right-10"> 
        <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i> 
       </div> 
       <div class="media-body"> 
        <h6 class="media-heading">Event started</h6> 
        <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time> 
       </div> 
       </div> 
      </a> 
      <a class="list-group-item" href="javascript:void(0)" role="menuitem"> 
       <div class="media"> 
       <div class="media-left padding-right-10"> 
        <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i> 
       </div> 
       <div class="media-body"> 
        <h6 class="media-heading">Message received</h6> 
        <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time> 
       </div> 
       </div> 
      </a> 
      </div> 
     </div> 
     <div class="scrollable-bar scrollable-bar-vertical scrollable-bar-hide" draggable="false"><div class="scrollable-bar-handle" style="height: 205.043px; transform: translate3d(0px, 0px, 0px);"></div></div></li> 
     <li class="dropdown-menu-footer" role="presentation"> 
     <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button"> 
      <i class="icon wb-settings" aria-hidden="true"></i> 
     </a> 
     <a href="javascript:void(0)" role="menuitem"> 
      All notifications 
     </a> 
     </li> 
    </ul> 
    </li> 
    <li class="dropdown"> 
    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false" data-animation="scale-up" role="button"> 
     <span class="avatar avatar-online"> 
     <img src="../../global/portraits/5.jpg" alt="..."> 
     </span> 
    </a> 
    <ul class="dropdown-menu" role="menu"> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a> 
     </li> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a> 
     </li> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a> 
     </li> 
     <li class="divider" role="presentation"></li> 
     <li role="presentation"> 
     <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a> 
     </li> 
    </ul> 
    </li> 
</ul> 

JS

$('.keep-open').on({ 
    "shown.bs.dropdown": function() { 
    $(this).attr('closable', false); 
    }, 
    "click": function() { }, 
    "hide.bs.dropdown": function() { 
    return $(this).attr('closable') == 'true'; 
    } 
}); 

$('.keep-open #dLabel').on({ 
    "click": function() { 
    $(this).parent().attr('closable', true); 
    } 
}); 

首先點擊: [first click]

第二點擊: second click

+0

*«它似乎停止»*和*«它不工作»*不是一個明確的問題描述。請對被要求的行爲和發生的行爲進行更「描述」。 –

回答

0

這無關你的jQuery,這是一個CSS問題,它不能正確處理您需要檢查你的CSS代碼尋找:活躍&:重點,我猜它應該適用於<li class="dropdown keep-open">,因爲你沒有分享你的CSS很難找到確切的問題。