Question

我很想知道，对于你所有的javascript和jquery guru来说，解决这个问题的最佳方法是什么。我所拥有的是一个通过CSS隐藏到屏幕底部的导航。我已经设法让它作为切换工作正常 - 你可以在这里看到http://jsfiddle.net/olichalmers/Lby7vfdf/。

var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});

这显然意味着菜单上下滑动。

我的问题是我想在初始点击时为菜单设置动画，然后当您再次单击该按钮关闭它时，我希望导航窗口向上滑动。然后当您再次单击它以打开它时，它再次从底部出现。我一直试图了解这将如何工作，我认为它将是两个类（一个用于隐藏菜单，一个用于显示菜单），它们将被添加到正文中。我在这里有一个jsfiddle http://jsfiddle.net/olichalmers/twqd2yj0/

var body = $("body"); $("#menuBtn").click(function() {
      if (body.hasClass("hideMenu")) {
        body.removeClass("hideMenu").addClass("showMenu");
      }
      else if (body.hasClass("showMenu")) {
        body.removeClass("showMenu").addClass("hideMenu");
      }});

这可能令人震惊，因为它试图解决这个问题。我正在使用jquery但是它可能是一个使用此处需要的事件监听器的JavaScript解决方案？我的jquery和javascript知识充其量只是因为我还在学习中所以如果我看起来很笨，请放轻松！

希望我已经足够清楚了。感谢。

Answer 1

我可以建议采用不同的方法吗？

在单独的DIV中创建底部菜单，该DIV位于HTML的最顶部（直接位于BODY标记下）。制作DIV position: fixed - 将其从“流”中取出并将其相对于视口（屏幕）定位，而不是任何其他div或网页本身。现在，您可以根据某些触发器向上/向下移动它。

这是一个代码示例：

jsFiddle Demo

<强> HTML：

<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
    <div id="content">
        <p>Content goes here</p>
        <p>Hover over small box at bottom left</p>
    </div>
</div>

<强> jQuery的：

$('#botttrig').hover(
    function(){
        $(this).fadeOut();
        $('#bottmenu').animate({
            'bottom': '0px'
        },500);
    },
    function(){
        //do nothing on hover out
    }
);
$('#bottmenu').hover(
    function(){
        //do nothing on hover in
    },
    function(){
        $('#bottmenu').animate({
            'bottom': '-80px'
        },500);
        $('#botttrig').fadeIn();
    }
);

有关其他示例，请参阅this jsFiddle。我移除了触发器框，并在屏幕底部显示了菜单的顶部10px。悬停时，向上滑动菜单。您可能希望增加#bottmenu div上的z-index以始终将其显示在页面上的其他DIV上方，以便始终可见。

Answer 2

http://jsfiddle.net/twqd2yj0/4/

我已使用slideToggle()并将display:none;添加到#navHold

使用一个菜单按钮在类中添加动画和动画

2 个答案: