Question

我已经找到了答案，但似乎无法确切地找到需要在这里完成的工作。

我有3个li标签，每个标签都有一个下拉ul。我想更改活动li上的背景颜色，如果我点击另一个li或当前活动的li，则将其删除。到目前为止，我已设法将该类添加到活动li中，但只有通过单击另一个li才能删除它。如果再次点击当前活动的li并关闭它，我需要删除该类。

感谢。

    <style>
     .add_color {background:#F3A54E;color:#FFF !important;}
    </style>

    <body>
<ul class="SubMenu">
    <li>Shop By Category
               <ul>
                <li>some text</li>
                <li>some text</li>
            </ul>
        </li>
        <li>Shop By Brand
            <ul>
               <li>some text</li>
               <li>some text</li>
            </ul>
        </li>
        <li>Diet Specifics
            <ul>
              <li>some text</li>
              <li>some text</li>
           </ul>
        </li>
</ul>
    </body>

    <script>
    // sub menu click fuction for drop down menus
     $(document).ready(function () {
        $("li").click(function () {
            //Add and remove background color.
           $("ul.SubMenu li").removeClass("add_color");
           $(this).toggleClass("add_color");
            //Toggle the child but don't include them in the hide selector using .not()
            $('li > ul').not($(this).children("ul")
            .slideToggle(400)).slideUp(400);

        });
    });
    </script>

Answer 1

问题是你在调用li之前从所有toggleClass()元素中删除了类，这意味着当执行toggleClass()时，类也会从当前元素中删除，这将导致在课程中添加toggleClass而不是删除它。

$(document).ready(function() {
  $(".SubMenu > li").click(function(e) {
    //Add and remove background color.
    $("ul.SubMenu li.add_color").not(this).removeClass("add_color");
    $(this).toggleClass("add_color");

    //Toggle the child but don't include them in the hide selector using .not()
    $('.SubMenu li > ul').not($(this).children("ul")
      .slideToggle(400)).slideUp(400);

  });
});

.add_color {
  background: #F3A54E;
  color: #FFF !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="SubMenu">
  <li>Shop By Category
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Shop By Brand
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Diet Specifics
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
</ul>

Answer 2

这里的问题是您在删除它后立即重新添加该类。为了避免这种情况：

 $(document).ready(function () {
    $("li").click(function () {
       var $this = $(this);
        //Add and remove background color.
       $("ul.SubMenu li").not($this).removeClass("add_color");
       $this.toggleClass("add_color");

       //Toggle the child but don't include them in the hide selector using .not()
        $('li > ul').not($(this).children("ul")
        .slideToggle(400)).slideUp(400);

    });
});

Answer 3

首先删除课程

$("ul.SubMenu li").removeClass("add_color");

然后你切换它

$(this).toggleClass("add_color");

当然不行。改变那个顺序。

干杯 [R

Answer 4

$(document).ready(function () {
    $("li").click(function () {
        //Add and remove background color.
     $("ul.SubMenu li").each(function (index, element) {
       $(this).removeClass("add_color");
       });

       $(this).toggleClass("add_color");
        //Toggle the child but don't include them in the hide selector using .not()
        $('li > ul').not($(this).children("ul")
        .slideToggle(400)).slideUp(400);

    });
});

希望这有帮助

Answer 5

我认为这正是您所寻找的，代码中的注释解释了正在发生的事情：

// sub menu click fuction for drop down menus
$(document).ready(function() {
  // Start with submenus not showing
  $('li > ul').hide();
  
  // Handle clicks
  $("li").click(function() {
    var $this = $(this);
    
    // Do we have the class?
    if ($this.hasClass("add_color")) {
      // Yes, remove it and make sure our children are up
      $this.removeClass("add_color");
      $this.children("ul").slideUp(400);
    } else {
      // No, add it, make sure no other items have it,
      // make sure all other children are up, and that
      // ours are down
      $this.addClass("add_color");
      $("ul.SubMenu li").not(this).removeClass("add_color");
      $('li > ul').not($this.children("ul")
        .slideDown(400)).slideUp(400);
    }
  });
});

.add_color {
  background: #F3A54E;
  color: #FFF !important;
}

<ul class="SubMenu">
  <li>Shop By Category
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Shop By Brand
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
  <li>Diet Specifics
    <ul>
      <li>some text</li>
      <li>some text</li>
    </ul>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 6

我没有动画制作了[plunker] [1]。您必须单击父li才能切换颜色。

  [1]: http://plnkr.co/edit/TiWxVD6o2z0YATkQtiEK?p=preview

从li中删除类

6 个答案: