0

嗨，我已经绞尽脑汁好几天了。我正在使用 jquery 中的隐藏功能创建一个下拉菜单。我希望我的菜单栏在我的 li 标签被选中时隐藏，然后页面导航到我网站的下一页。

当我选择锚定标签时，我现在得到的所有内容就是菜单只是消失了。

这是jQuery：

$(document).ready(function(){
    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $(".show_hide").click(function(){ 
        $(".slidingDiv").slideToggle(); 
    });

    $(window).onbeforeunload(function() {
        $(".slidingDiv").hide();
});
});

这是html：

    <div id="mobnav-wrapper">
    <div id="logo-top-mob"> 
        <a href="index.html"><img src="images/logo-mob.png" width="163" height="21" /></a>
    </div>

<div id="mob-button"> 
        <a href="#" class="show_hide"><img src="images/mob_button.png" width="33" height="24" /></a>

</div>
<div class="slidingDiv">
    <ul> 
        <li class="hide_nav"><a href="work.html"> Work </a></li>
        <li class="hide_nav"><a href"services.html" >Services</a></li>
        <li class="hide_nav"><a href"clients.html" >Clients</a></li>
        <li class="hide_nav"><a href"about.html" >About</a></li>
            <li class="hide_nav"><a href"contact.html" >Contact</a></li>
        <li class="hide_nav"><a href"follow.html" >Follow</a></li>
    </ul> 
</div>

我曾尝试使用 unload 和 .onbeforeunload 但我无法理解它。如果有人有想法或可以指出我正确的方向，我会非常感谢

4

2 回答 2

0

jQuery 的功能show()是hide()即时的。如果您打算为这些元素设置动画，则需要添加一个 speed 参数：

$(window).onbeforeunload(function () {
  $('.slidingDiv').hide('fast');
});

也就是说，实际运行多少动画取决于浏览器从服务器加载下一页的速度。

如果您希望您的动画首先运行，完成，然后按照用户单击的链接，我会摆脱 onbeforeunload 的东西并尝试这样的事情：

$(document).on('click', '.slidingDiv a', function () {
  var link = $(this);

  $('.slidingDiv').hide('slow', function () {
    location.href = link.attr('href');
  });

  return false;
});
于 2013-02-19T11:43:28.027 回答
0

将您的脚本更改为此...

$(document).ready(function(){
    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $("li.hide_nav a").click(function(e){ 
        e.preventDefault();
        var href = this.href;
        $(".slidingDiv").slideUp(500, function() {
            window.location.href = href;
        });
    });
});

它处理元素中链接上的点击事件，li并首先阻止它们起作用。这意味着slideUp()可以执行然后运行一个回调函数来处理可能由链接单击触发的重定位。

于 2013-02-19T11:48:50.910 回答