Javascript 将父项的子项ul从左向右滑动jquery

我有一个包含菜单的div，当用户点击一个按钮时，菜单从左到右滑动，在这里之前一切正常，但是当我试图显示下一个目标时，我无法回复相同的效果

菜单的框架如下所示：

<button id="icons-header" class="hamburguer">
 Push me!
</button>
<div id="sideBar" class="container-fluid sidebar visible">
<div class="row">
    <div class="menu-left">
            <ul id="mm-1" class="mm-list visible"> /This is the principal menu
                <li><a class="mm-next" href="#" data-target="#women">Women</a></li>
                <li><a class="mm-next" href="#" data-target="#men">Men</a></li>
                <li><a class="mm-next" href="#" data-target="#kids">Kids</a></li>
            </ul>

            <!-- from here to the final are the sub elements -->
            <ul id="men" class="mm-list">
                <li><a class="mm-next icon" href="#" data-target="#mm-1">
            <i class="glyphicon glyphicon-triangle-left"></i>  Home</a></li>
                <li class="menu-title"><span> Men</span></li>
                <li><a class="mm-next" href="#" data-target="#men-clothing">clothes</a></li>
                <li><a class="mm-next" href="#" data-target="#mm-bags">stuff</a></li>
            </ul>

            <ul id="men-clothing" class="mm-list">
                <li><a class="men-bags" href="#" data-target="#men">
            <i class="glyphicon glyphicon-triangle-left"></i>  Men</a></li>
                <li class="menu-title"><span> clothes</span></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>

            </ul>

---

我回复的代码显示了新段，但不起作用，我的完整代码是

代码中有错误，javascript中的类名不同。我在你的javascript中做了一些更改，请查看一下，如果不起作用请告诉我

$(function(){
$(".hamburguer").click(function(){
        var button =  $(this).attr('class');
        console.log(typeof button);
        if(button == "hamburguer")
        {
            $(this).removeClass('hamburguer');
            $(this).addClass('blueCross');
            $('#mm-1').show();
            /*$('#sideBar').show(300);*/

        }else
        {
            $(this).removeClass('blueCross');
            $(this).addClass('hamburguer');
            $(".mm-list").hide();

        }
        var hidden = $('#sideBar');
        var element = $('#mm-1');
        if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
            hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');

        } else {
            hidden.animate({"left":"0px"}, "slow").addClass('visible');

        }


    });
    $(document).on('click', '.mm-next', function (e) {
        e.preventDefault();
        var target = $(this).data("target");
        var others = $("div.menu-left").find(".mm-list").not(target);
        others.hide();
        $(target).show();

        return false;
    });
    });

---

类名“hamburguer”创建问题，因为它们在提供的javascript中似乎不相同。请检查一下。如果有帮助，请告诉我

@victor，在这种情况下，你可以这样做。我刚刚在JS中做了一些更改。请马上看一看

<script>
$(function(){
$(".hamburguer").click(function(){
  var button =  $(this).attr('class');
    console.log(typeof button);
    if(button == "hamburguer")
    {
        $(this).removeClass('hamburguer');
        $(this).addClass('blueCross');
        $('#mm-1').show();
        /*$('#sideBar').show(300);*/
    }else
    {
        $(this).removeClass('blueCross');
        $(this).addClass('hamburguer');
        $(".mm-list").hide();
    }
    var hidden = $('#sideBar');
    var element = $('#mm-1');
    if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');

    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
        $('#mm-1').show();
    }
});
$(document).on('click', '.mm-next', function (e) {

    e.preventDefault();
    var hidden = $('#sideBar');
    var target = $(this).data("target");
    var others = $("div.menu-left").find(".mm-list").not(target);
    others.hide();
    hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    hidden.animate({"left":"0px"}, "slow").removeClass('visible');
    $(target).show();
    return false;
});

});
</script>

---

让我知道这是否有帮助。

当div隐藏时，第二次单击后显示的元素一切正常，您能详细说明吗？当然，事实上，当用户单击按钮时，容器div从左向右滑动以显示菜单，如果用户单击男性、女性或儿童，显示一个子菜单，但现在效果只是显示和隐藏，我希望该效果不是显示或隐藏我想从左向右滑动你可以在uk.tommy.com上看到效果，你可以在响应模式下检查，div幻灯片和单击第一个元素时，请单击幻灯片并显示下一个列表，但我希望避免幻灯片中显示所有容器，只是ul tagI再次粘贴代码，但正确的是jsfiddle@victor据我所知，你想要一份菜单，当用户点击菜单链接，它应该从左到右动画和相同的效果时，点击主链接。对吗？我检查你是否添加了一个名为.sub_侧边栏的新类。我认为这个类需要将它放在我想要滑动的每个子元素上，真的吗？@victor，不，一点也不。这只是为了我的测试，你不必添加任何额外的类。请看一看更新的代码。它是有效的，谢谢，但我有一个问题？可以只为ul元素制作幻灯片吗？很抱歉，回复太晚，我不关心ul是否可以动画。很高兴知道我的回答对你有帮助。

<script>
$(function(){
$(".hamburguer").click(function(){
  var button =  $(this).attr('class');
    console.log(typeof button);
    if(button == "hamburguer")
    {
        $(this).removeClass('hamburguer');
        $(this).addClass('blueCross');
        $('#mm-1').show();
        /*$('#sideBar').show(300);*/
    }else
    {
        $(this).removeClass('blueCross');
        $(this).addClass('hamburguer');
        $(".mm-list").hide();
    }
    var hidden = $('#sideBar');
    var element = $('#mm-1');
    if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');

    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
        $('#mm-1').show();
    }
});
$(document).on('click', '.mm-next', function (e) {

    e.preventDefault();
    var hidden = $('#sideBar');
    var target = $(this).data("target");
    var others = $("div.menu-left").find(".mm-list").not(target);
    others.hide();
    hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    hidden.animate({"left":"0px"}, "slow").removeClass('visible');
    $(target).show();
    return false;
});

});
</script>