javascript - 将父级的子级 ul 从左向右滑动 jquery

Question

我有一个包含菜单的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>

第一个显示菜单的效果是这样的:

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');

        }

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

Answer 1

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

请告诉我是否有帮助。