応答ナビゲーションは、私は私の応答ナビゲーションを開いて、それを閉じるために、次のコードを使用してい.slideUp（）

を使用した後に開きません。応答ナビゲーションは、私は私の応答ナビゲーションを開いて、それを閉じるために、次のコードを使用してい.slideUp（）

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

     $("nav ul").toggleClass("open"); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").slideUp(); 

    }); 
});

これは、ナビゲーション一度しかし、完璧に動作しますナビゲーションボタンを閉じても機能しません。誰にもアイデアはありますか？これに関する助けがありがとうございました！

ナビゲーションのためのHTML：代わりにslideUpの

<nav id="nav"> 
<div class="wrapper"> 
    <div class="brand"> 
     <img class="logo" src="img/icons/diamond.png" alt="Danny Hatton Logo"><h1>dannyhatton</h1> 
    </div> 
     <span class="burger-nav"><img src="img/burger.png" alt="Expand navigation"></span> 
    <ul> 
     <li><a href="#intro" class="slide">Home</a></li> 
     <li><a href="#aboutme" class="slide">About Me</a></li> 
     <li><a href="#contactme" class="slide">Contact Me</a></li> 
     <li><a href="#">Blog</a></li> 
    </ul> 
</div> 
</nav>

出典

2016-09-13 dannyhatton

slideUpが完了したときにopenクラスがnav ulに残っていますか？移行が完了したら、その上でClassClassを削除したいかもしれません。 –

すてきなスコット、どうしたらいい？ JQueryについてはかなり初心者です。 – dannyhatton

あなたはあなたのhtmlもまた見せてくれるでしょうか？ – Canvas

（）slideToggleを（使用）これは偶数/奇数クリック

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

    $("nav ul").slideToggle(); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").slideToggle(); 

    }); 

});

slideUp（）とslideDown（）の両方を発射します最初にディスプレイなしを追加してメニューを非表示にすることができます

<ul style="display:none">

そしてバーガーをクリックしてナビゲーションそれは、メニューを開き、すべてが必ず

デモのために正常に動作します：一度バディこれを試してみてくださいhttps://jsbin.com/zohoqi/3/edit?html,js,console,output

出典

2016-09-13 19:40:31 KrishCdbry

ありがとう@KrishCdbry私はそれをテストしましたが、残念ながらそれは動作しませんし、同じ結果を提供します。 – dannyhatton

ちょうど更新されたコードとデモリンクが追加されています。 – KrishCdbry

@KrishCdbryすぐにちょっとしたことに、 'toggleSlide（）'の前に '.stop（）'を入れたい場合は、 'Expand navigation'をクリックし続けると、上下にスライドし続けます – Canvas

この試してみてください。これを支援してきましたみんなのおかげで、@KrishCdbryが最も近く来たが、以下の解決スクリプトです

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
</head> 
 
    <body> 
 
     
 
     <nav id="nav"> 
 
<div class="wrapper"> 
 
    <div class="brand"> 
 
     <img class="logo" src="img/icons/diamond.png" alt="Danny Hatton Logo"><h1>dannyhatton</h1> 
 
    </div> 
 
     <span class="burger-nav"><img src="img/burger.png" alt="Expand navigation"></span> 
 
    <ul> 
 
     <li><a href="#intro" class="slide">Home</a></li> 
 
     <li><a href="#aboutme" class="slide">About Me</a></li> 
 
     <li><a href="#contactme" class="slide">Contact Me</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
    </ul> 
 
</div> 
 
</nav> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     
 
     <script> 
 
      
 
     $(document).ready(function() { 
 

 
      $(".burger-nav").on("click", function(){ 
 

 
       $("nav ul").slideToggle(); 
 

 
      }); 
 

 
      $("nav li a").on("click", function() { 
 

 
       $("nav ul").slideUp(); 
 

 
      }); 
 

 
     }); 
 
    
 
     </script> 
 
    </body> 
 
</html>

出典

2016-09-13 20:01:06 Ehsan

非常に可能性の高いものが完全に見つからない限り、ナビゲーションボタンはこのソリューションではアクティブ化されません。コードが実行されたときに動作することはわかりますが。 @KrishCdbryによる上記の解決方法と同じです – dannyhatton

：

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

     $("nav ul").slideToggle(); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").slideUp(); 

    }); 

});

最終的なコードを：

$(document).ready(function() { 

    $(".burger-nav").on("click", function(){ 

     $("nav ul").toggleClass("open"); 

    }); 

    $("nav li a").on("click", function() { 

     $("nav ul").toggleClass(); 

    }); 
});

toggleClassの後に唯一の違い（「開く」）があります。

出典

2016-09-13 21:05:06 dannyhatton

応答ナビゲーションは、私は私の応答ナビゲーションを開いて、それを閉じるために、次のコードを使用してい.slideUp（）

答えて

関連する問題