0

こんにちは私は何日も頭を悩ませてきました。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>

アンロードと.onbeforeunloadを使用しようとしましたが、頭を悩ませることができません。誰かがアイデアを持っているか、私を正しい方向に向けることができれば、私はそうなるでしょう。

4

2 に答える 2

0

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;
});
于 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 に答える