从左到右的父母滑动父母的孩子

Question

我有一个包含菜单的div，当用户单击按钮时，该菜单从左至rigth滑动，直到这里一切都可以，但是我无法回答相同的效果当我尝试显示下一个目标时。

菜单的骨架如下：

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

让我知道它是否有帮助。

Answer 2

代码中存在错误，您的类名称在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;
    });
    });

Answer 3

类名称'hamburguer'创建问题，因为它们在提供的JavaScript中似乎不相同。请检查一次。让我知道它是否有帮助。