Question

我试图制作一个互动菜单。它应该像这样工作：

如果我点击菜单图标，导航将向下滑动到可见区域（工作正常）

然后，如果再次单击菜单图标，导航将再次返回到不可见区域。但第二步不起作用。

$(document).ready(function(){
$(".menu-icon").click(function(){
    $("#navigation").animate({top: "40%"}),5000;
    $(this).addClass("menu-icon-active").removeClass("menu-icon");
});
$(".menu-icon-active").click(function(){
    $("#navigation").animate({top: "-40%"}),5000;
    $(this).addClass("menu-icon").removeClass("menu-icon-active");
});

}）;

有人知道怎么做吗？

Answer 1

如果元素具有“活动”类，则可以通过在同一个点击处理中进行检查来解决您的问题，如果是，则将其置为活动，如果不是“激活”它。

这是一个有效的代码示例：

$(document).ready(function() {

    $(".menu-icon").click(function() {

        if ($(this).hasClass("menu-icon-active") ){

            // menu is active, deactivate it
             $("#navigation").animate({
                top: "10%"
            }), 5000;

            $(this).removeClass("menu-icon-active");

        } else {

            // menu is not active
            $("#navigation").animate({
                top: "30%"
            }), 5000;

            $(this).addClass("menu-icon-active");

        } 

    });
});

<强> CLICK HERE TO SEE A FIDDLE OF THIS CODE IN ACTION

希望这有帮助！

更新： jQuery提示：您无需在menu-icon点击处理程序中添加或删除menu-icon类。这不是必需的，可能会给你意想不到或错误的结果。 [感谢用户@TJ指出了这一点。]

Answer 2

我知道这已经解决了但是FYI jQuery有slideToggle()和toggleClass()方法用于这种事情：

＆＃13;

$(function(){
    $("#navigation").hide();//initially hidden
    $(".menu-icon").on("click",function(){
        $("#navigation").slideToggle();
        $(this).toggleClass('active');
    })
})

＆＃13;

.active {color:green}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#navigation" class="menu-icon">click me</a>
<ul id="navigation">
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

＆＃13;

交互式菜单无法在Jquery中滑回

2 个答案: