交互式菜单可以't在Jquery中向后滑动

interactive menu can't slide back in Jquery

本文关键字：Jquery 菜单 交互式      更新时间：2023-09-26

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

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

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

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

    })；

有人知道怎么做吗？

您可以通过在同一个点击手柄内检查元素是否具有"活动"类来解决问题，如果是，则取消激活它，如果没有"激活"它。

这是一个工作代码示例：

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

单击此处查看此代码的FIDDLE

希望这能有所帮助！

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

我知道这个问题已经解决了，但仅供参考，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>

相关文章：