交互式菜单不能在 Jquery 中滑回答案

【问题标题】：interactive menu can't slide back in Jquery交互式菜单不能在 Jquery 中滑回
【发布时间】：2014-11-08 16:09:12
【问题描述】：

我正在尝试制作交互式菜单。它应该像这样工作：

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

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

$(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");
});

});

有人知道怎么做吗？

【问题讨论】：

标签： javascript jquery

【解决方案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 指出这一点。]

【讨论】：

你为什么要添加/删除类menu-icon..？
@TJ 你是对的，它不是必需的。我正在粘贴原始作者的代码，然后看了看。将更新我的答案

【解决方案2】：

我知道这已经解决了，但仅供参考 jQuery 有 slideToggle() 和 toggleClass() 方法来解决这类问题：

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

.active {color:green}

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

【讨论】：