javascript - Jquery toggleClass 到 <ul>

Question

当 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>

Answer 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>