Jquery toggleClass 到 <ul>答案

【问题标题】：Jquery toggleClass to <ul>Jquery toggleClass 到 <ul>
【发布时间】：2017-06-09 08:43:45
【问题描述】：

当ul 父级点击时，我无法将类切换到ul 子菜单。

我希望该类只添加到一个ul class="side-menu list-active2"，而另一个不添加。

我该如何进行这项工作？我知道我的脚本错了，我已经尝试过使用.find

$(".side-menu-main").click(function(){
            $(".list-active1").toggleClass("hj-side-menu-active");
            $(".list-active2").toggleClass("hj-side-menu-active2");
        });

.menu-slide-content {
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
}
.side-menu, .side-menu li {
    width: 100%;
    background-color: #7a7a7a;
}
.list-active1 {
    position: relative;
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
.list-active2 {
    position: absolute;
    top: 0;
    display: none;
    opacity: 0;
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(100%,0);
    -o-transform: translate(100%,0);
    -moz-transform: translate(100%,0);
    -webkit-transform: translate(100%,0);
}
.hj-side-menu-active {
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(-100%,0);
    -o-transform: translate(-100%,0);
    -moz-transform: translate(-100%,0);
    -webkit-transform: translate(-100%,0);
}
.hj-side-menu-active2 {
    display: block;
    top: 0;
    opacity: 1;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="menu-slide-content">
      <ul class="side-menu list-active1">
        <li>
          <a class="side-menu-main">Fashion</a>
          <ul class="side-menu list-active2"><!-- Add class to this <ul> 
when <a class="side-menu-main"> click -->
            <a class="side-menu-main">Back</a>
            <li><a>Bag</a></li>
            <li><a>Clothes</a></li>
            <li><a>Pants</a></li>
          </ul>
        </li>
        <li>
          <a class="side-menu-main">Electronic</a>
          <ul class="side-menu list-active2"><!-- This one not added -->
            <a class="side-menu-main">Back</a>
            <li><a>Lamp</a></li>
            <li><a>LCD</a></li>
            <li><a>Battery</a></li>
          </ul>
        </li>
        <li>
          <a class="side-menu-main">Drinks</a>
          <ul class="side-menu list-active2">
            <a class="side-menu-main">Back</a>
            <li><a>NasTy</a></li>
            <li><a>Loca-Loca</a></li>
            <li><a>Juice</a></li>
          </ul>
        </li>
      </ul>
    </div>

【问题讨论】：

标签： javascript jquery css menu

【解决方案1】：

这样的？

$(".side-menu-main").click(function(){
            $(this).parent().find(".list-active1").first().toggleClass("hj-side-menu-active");
            $(this).parent().find(".list-active2").first().toggleClass("hj-side-menu-active2");
        });

.menu-slide-content {
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
}
.side-menu, .side-menu li {
    width: 100%;
    background-color: #7a7a7a;
}
.list-active1 {
    position: relative;
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
.list-active2 {
    position: absolute;
    top: 0;
    display: none;
    opacity: 0;
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(100%,0);
    -o-transform: translate(100%,0);
    -moz-transform: translate(100%,0);
    -webkit-transform: translate(100%,0);
}
.hj-side-menu-active {
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(-100%,0);
    -o-transform: translate(-100%,0);
    -moz-transform: translate(-100%,0);
    -webkit-transform: translate(-100%,0);
}
.hj-side-menu-active2 {
    display: block;
    top: 0;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="menu-slide-content">
      <ul class="side-menu list-active1">
        <li>
          <a class="side-menu-main">Fashion</a>
          <ul class="side-menu list-active2"><!-- Add class to this <ul> 
when <a class="side-menu-main"> click -->
            <a class="side-menu-main">Back</a>
            <li><a>Bag</a></li>
            <li><a>Clothes</a></li>
            <li><a>Pants</a></li>
          </ul>
        </li>
        <li>
          <a class="side-menu-main">Electronic</a>
          <ul class="side-menu list-active2"><!-- This one not added -->
            <a class="side-menu-main">Back</a>
            <li><a>Lamp</a></li>
            <li><a>LCD</a></li>
            <li><a>Battery</a></li>
          </ul>
        </li>
        <li>
          <a class="side-menu-main">Drinks</a>
          <ul class="side-menu list-active2">
            <a class="side-menu-main">Back</a>
            <li><a>NasTy</a></li>
            <li><a>Loca-Loca</a></li>
            <li><a>Juice</a></li>
          </ul>
        </li>
      </ul>
    </div>

【讨论】：

【解决方案2】：

我使用数据标签来传递类别信息。然后你可以切换正确的菜单

$(".side-menu-main").click(function(){
  var Selected = $(this).data("category");
  
  $(".list-active1").toggleClass("hj-side-menu-active");
  $("." + Selected + "-list-active2").toggleClass("hj-side-menu-active2");
});

.menu-slide-content {
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
}
.side-menu, .side-menu li {
    width: 100%;
    background-color: #7a7a7a;
}
.list-active1 {
    position: relative;
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
.Fashion-list-active2, .Electronic-list-active2, .Drinks-list-active2 {
    position: absolute;
    top: 0;
    display: none;
    opacity: 0;
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(100%,0);
    -o-transform: translate(100%,0);
    -moz-transform: translate(100%,0);
    -webkit-transform: translate(100%,0);
}
.hj-side-menu-active {
    transition: opacity .5s linear,ease .25s;
    -o-transition: opacity .5s linear,ease .25s;
    -moz-transition: opacity .5s linear,ease .25s;
    -webkit-transition: opacity .5s linear,ease .25s;
    transform: translate(-100%,0);
    -o-transform: translate(-100%,0);
    -moz-transform: translate(-100%,0);
    -webkit-transform: translate(-100%,0);
}
.hj-side-menu-active2 {
    display: block;
    top: 0;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="menu-slide-content">
      <ul class="side-menu list-active1">
        <li>
          <a class="side-menu-main" data-category="Fashion">Fashion</a>
          <ul class="side-menu Fashion-list-active2"><!-- Add class to this <ul> 
when <a class="side-menu-main"> click -->
            <a class="side-menu-main" data-category="Fashion">Back</a>
            <li><a>Bag</a></li>
            <li><a>Clothes</a></li>
            <li><a>Pants</a></li>
          </ul>
        </li>
        <li>
          <a class="side-menu-main" data-category="Electronic">Electronic</a>
          <ul class="side-menu Electronic-list-active2"><!-- This one not added -->
            <a class="side-menu-main" data-category="Electronic">Back</a>
            <li><a>Lamp</a></li>
            <li><a>LCD</a></li>
            <li><a>Battery</a></li>
          </ul>
        </li>
        <li>
          <a class="side-menu-main" data-category="Drinks">Drinks</a>
          <ul class="side-menu Drinks-list-active2">
            <a class="side-menu-main" data-category="Drinks">Back</a>
            <li><a>NasTy</a></li>
            <li><a>Loca-Loca</a></li>
            <li><a>Juice</a></li>
          </ul>
        </li>
      </ul>
    </div>

【讨论】：