Question

下午好，我是前端的新东西，怀疑是如何解决错误，当我点击语言按钮和导航的另一个按钮来改变它我似乎我仍然在按钮并且我在悬停中意识到当李开启时仍然有颜色，在jquery中我有类似我可以解决的东西吗？

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

首先点击：

第二次点击：

Answer 1

这与你的jquery无关，它是一个css问题，它无法正常处理你需要检查你的css代码寻找：active＆amp; ：焦点，我想它应该适用于<li class="dropdown keep-open">，因为你没有分享你的CSS，很难找到确切的问题。

如何修复li按钮之间的问题？

1 个答案: