gpt4 book ai didi

javascript - Jquery toggleClass 到

    转载 作者:行者123 更新时间:2023-11-30 15:15:57 25 4
    gpt4 key购买 nike

    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>

    最佳答案

    是这样的吗?

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

    关于javascript - Jquery toggleClass 到 <ul>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44453234/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com