Jquery toggleClass为<ul>

时间：2017-06-09 08:43:46

标签： javascript jquery css menu

当ul父点击时，我在切换到ul子菜单时遇到了一些麻烦。

我希望课程只添加到一个ul class="side-menu list-active2"而另一个没有添加。

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

了

＆＃13;
＆＃13; 
$(".side-menu-main").click(function(){
            $(".list-active1").toggleClass("hj-side-menu-active");
            $(".list-active2").toggleClass("hj-side-menu-active2");
        });
＆＃13; 
.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;
}
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

这样的东西？

$(".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>

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
$(".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");
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题