Question

嗨，我已经绞尽脑汁待了好几天。我正在使用jquery中的hide函数创建一个下拉菜单。我希望我的菜单栏在我选择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，但我无法理解它。如果有人有想法或能指出我正确的方向，我会如此如此，谢天谢地

Answer 1

jQuery函数show()和hide()是立即的。如果您打算为这些元素设置动画，则需要添加速度参数：

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

Answer 2

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

$(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()可以执行，然后运行一个回调函数来处理链接点击触发的重定位。

在页面卸载之前，Jquery hide（）onclick

2 个答案: