Question

我有这个响应式可折叠菜单。

<nav class="navbar navbar-default">
        <div class="container-fluid col-md-12">
            <div class="col-md-2"></div>
            <div id="logo" class="col-md-3"></div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse col-md-6" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#"><span>Home</span></a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Things</span> <!-- <span class="caret"></span> --></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><span>Drop1</span></a></li>
                            <li><a href="#"><span>Drop2</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>Carriers</span></a></li>
                    <li><a href="#"><span>Contacts</span></a></li>
                </ul>
            </div>
        </div>
    </nav>

我添加了此代码以添加和删除“活动”类以用于样式目的：

<script>
        var selector = '.nav li';
        $(selector).on('click', function() {
            $(selector).removeClass('active');
            $(this).addClass('active');
        });
        </script>

问题是，我无法设置活动菜单项的背景颜色。我已经尝试了我能想到的一切，以及我能找到的一切，但没有成功。由于某种原因，我无法更改引导程序默认颜色。其他一切都正常工作，我能够设计其他元素，但不是出于某种原因。这是JSFiddle

Answer 1

将selector更改为.nav li a。因为正在为active设置CSS类li，而您的样式是li > a.active。

还可以使用e.stopPropagation();来阻止事件冒泡到父元素。

var selector = '.nav li a';
$(selector).on('click', function() {
  $(selector).removeClass('active');
  $(this).addClass('active');
  e.stopPropagation();
});

DEMO

Answer 2

这是因为您要在＆＃39; .nav li＆＃39;中添加和删除活动类。但在你的CSS中，你是造型＆＃39; li＆gt; a.active＆＃39 ;.因此，您需要将自己的css更改为＆＃39; li.active＆＃39;或者将您的javascript更改为var selector = .nav li a以符合您的CSS样式。

Answer 3

你可以这样做：

＆＃13;

var selector = '.nav li';
$(selector).on('click', function(e) {
  $('> a', selector).removeClass('active'); // just remove the class to the anchor
  $('> a', this).addClass('active'); // add the class to current anchor
  
  // $(selector).find('> a') === $('> a', selector)   
  
  e.stopPropagation(); // stop the event to bubbleup
});

＆＃13;

li > a.active {
  background-color: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid col-md-12">
    <div class="col-md-2"></div>
    <div id="logo" class="col-md-3"></div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse col-md-6" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class=""><a href="#"><span>Home</span></a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Things</span> <!-- <span class="caret"></span> --></a>
          <ul class="dropdown-menu">
            <li><a href="#"><span>Drop1</span></a>
            </li>
            <li><a href="#"><span>Drop2</span></a>
            </li>
          </ul>
        </li>
        <li><a href="#"><span>Carriers</span></a>
        </li>
        <li><a href="#"><span>Contacts</span></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Answer 4

看看这个小提琴https://jsfiddle.net/oboshto/tcwgvj70/8/

您应该为查询使用其他选择器。您也可以使用 .toggleClass（）添加/删除类

    var selector = '.nav li a';
    $(selector).on('click', function(e) {
      $(selector).toggleClass('active');
      e.stopPropagation();
    });

无法设置活动菜单元素的样式

4 个答案: