Поддерживайте мой CSS, даже если я нажимаю вне элемента

Я изучаю CSS и теперь у меня есть это :

https://jsfiddle.net/marquesm91/ahwxwyca/

В основном, я хочу выделить элемент, на который я нажал, и оставаться выделенным, когда я нажимаю вне элемента. Когда я переключаюсь между элементами, он только выделяет фактический элемент.

$(function() {
  $('#menu').metisMenu({
    toggle: false // disable the auto collapse. Default: true.
  });
});
#menu a:hover,
#menu a:focus {
  color: #fff;
  background-color: #2a6496;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <ul class="metismenu" id="menu">
            <li>
              <a href="#" aria-expanded="false">Menu<span class="glyphicon arrow"></span></a>
              <ul aria-expanded="false">
                <li><a href="#">item 2.1</a>
                </li>
                <li><a href="#">item 2.2</a>
                </li>
                <li><a href="#">item 2.3</a>
                </li>
                <li><a href="#">item 2.4</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </aside>
    </div>
  </div>
</div>

Сейчас мой CSS мне не помогает. Есть предложения?

2 ответа

  1. CSS может взаимодействовать с наведением, но не имеет возможности взаимодействовать с кликами так, как вы описываете. Вам понадобится Javascript.

    $('#menu').find("a").click(function(){
        $(this).css("background-color","#2a6496");
        $(this).css("color","#fff");
    });
    

    Вот скрипка .

    PS, при создании скрипок с jQuery, не забудьте выбрать jQuery из меню JS.


    Может быть, это ближе к тому, что вы хотите:

    $('#menu').find("a").focus(function() {
        $('#menu').find("a").each(function() {
            $(this).css("background-color", "initial");
            $(this).css("color", "initial");
        });
        $(this).css("background-color", "#2a6496");
        $(this).css("color", "#fff");
    });
    

    https://jsfiddle.net/zq0cpohb/

    Это только выделяет последний элемент, нажатый на..

  2. Это действительно невозможно без некоторых CSS hack .

    Лучший способ сделать это-использовать JavaScript.

    Попробуйте что-то вроде этого:

    $("#menu a").click(function() {
        $(this).addClass("focused");
    });
    

    И CSS:

    .focused {
        color: #fff;
        background-color: #2a6496;
    }