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>

如果有帮助，请告诉我。

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

班级名称＆＃39; hamburguer＆＃39;创建问题，因为它们在提供的javascript中似乎不相同。请检查一次。如果有帮助，请告诉我。

从左到右jquery滑动父亲的孩子ul

3 个答案: