HTML Jquery .toggleはトグルバックされません。

Question

<div class="row"> 
    <div class="col one-whole"> 
     <nav class="top-nav"> 
      <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="work/central.html">Central Plumping</a></li> 
      <li><a href="work/roofing.html">Roof</a></li> 
      <li><a href="work/drains.html">Drainage</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      <a href="../index.html"><img src="img/title.png"></a> 
      </ul> 
     </nav> 
     <nav class="burger-nav"> 
      <ul> 
       <li><a href="" id="toggleburger"><i class="fa fa-bars x3" aria-hidden="true"></i></a></li> 
       <li><a href="../index.html"><img src="img/title.png"></a></li> 
      </ul> 
     </nav> 
    </div> 
    </div> 
    <div class="burger"> 
    <div class="row menu"> 
     <div class="col one-whole"> 
      <ul> 
      <li><a href="index.html">Home</a><a href="" id="toggleburger"><i class="fa fa-times x3" aria-hidden="true"></i></a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="work/central.html">Central Plumping</a></li> 
      <li><a href="work/roofing.html">Roof</a></li> 
      <li><a href="work/drains.html">Drainage</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

こんにちは、現在基本的なJQueryを学習しようとしています。私は、画面サイズに基づいて各ナビゲーションバーを隠して表示する応答性の高いバーガーメニューを備えた、簡単なナビゲーションバーを作成することができました。私は表示されたときに100％の画面サイズが固定されていますが、現在設定されているバーガーのdivを作成しました。display：none。今私はそれを表示するために働いて私のトグルを持っているが、私はメニューバーを閉じるしようとすると、それは戻って切り替えるようではありません。どんな助けでも大丈夫です。次のように

私のjQueryのスクリプトは次のとおりです。

<script> 
    $(document).ready(function(){ 
     $("#toggleburger").click(function(){ 
      $(".menu").toggle(); 
     }); 
    }); 
</script> 

Answer 1

に例を見

<a href="javascript:void(0);" id="toggleburger"><i class="fa fa-times x3" aria-hidden="true"></i></a> 

にchagingしてみてください、私はあなたにclickイベントを結びつけるしようとしている要素をクリックしたときに、私はオフに向ける取得しています。

ここでの作業フィドルです：https://jsfiddle.net/p85kazv0/

私は単にあなたが（href=""でいただきましたによって決まる別の場所に誰かを指示することはもちろんである）そのデフォルトのアクションから使用しているa要素を妨げてきました： <a>要素のhref属性を設定

$("#toggleburger").click(function(e){ 
    e.preventDefault(); 
    $(".menu").toggle(); 
}); 

Answer 2

私はあなたの問題はあなたが空のhref属性でアンカータグを使用しているということだと思います。

すると、このFIDDLE

Answer 3

は#に等しい：

<li><a href="#" id="toggleburger"> 

予期しない動作のための

Answer 4

理由：

1. <a>いくつかの他のページへhrefセットを持っています。ページ・アクティビティー用のメニューまたはボタンを実装する必要がある場合は、href="#"と設定する必要があります。意味はどこにでもリダイレクトされません。このアクションにリンクされたイベントを実行するだけです。あなたのケースでは、別のdivの切り替えです。

e.preventDefault()は回避策ですが、何もしないでリンクがそこに座っているので、ここではお勧めできません。あなた自身が提出するフォームを持っていて、提出する前に処理/衛生をやりたいのであれば、あなたのロジックでデフォルトのアクションを無効にしたいと思えば、もっと合うでしょう。

2. id=toggleburgerには2つの要素があります。あなたのidを1つのhtmlページでユニークに保つ。これは、デバッグ中にあなたに多くの苦痛を与えることができます。

ここには、fiddleの作業がありますが、ハンバーガーのイメージを「ToggleBurger」のテキストに置き換えました。