jQuery菜單摺疊和展開三次

我有一個JavaScript菜單，當我點擊#dropdown按鈕時，我想展開/摺疊。首先，它需要三次點擊才能展開，並且在這三次點擊之後，效果非常好。我編輯了我的代碼，我必須再次點擊它三次才能工作，但在此之後，每次點擊都會使菜單連續展開/展開三次。jQuery菜單摺疊和展開三次

buttonClickHandler

function buttonClickHandler(e) { 
    e.preventDefault(); 
    $(document).ready(function(){ 
     $('#main').hide(); 
     $('a#dropdown-button').click(function(){ 
      $('#main').toggle(function(){ 
       $('#main').addClass('active').fadeIn(); 
      }, function(){ 
       $('#main').removeClass('active').fadeOut(); 
       return false; 
      }); 
     }); 
    }); 
}

初始化

function init(){ 
    var button = document.getElementById('dropdown-button'); 
    button.addEventListener("click", buttonClickHandler, false); 
} 

window.addEventListener("load", init, false);

HTML

<section id="nav-bar"> 
      <figure> 
       <span class="helper"></span><img src="img/Logo.png" alt="Zien Woningmarketing"/> 
      </figure> 
      <a href="#" id="dropdown-button"><img src="img/Menu.png" alt="Menuknop: open het menu"/></a> 
     </section> 
     <nav id="main"> 
      <ul id="firstLevel"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="fotografie.html">Producten</a></li> 
       <li><a href="marketing.html">Woningmarketing</a></li> 
       <li><a href="over.html">Over Zien!</a></li> 
       <li><a href="werkwijze.html">Werkwijze</a></li> 
      </ul> 
      <ul> 
       <li class="login"><a href="#">Inloggen</a></li> 
       <li><a href="#">Registreren</a></li> 
      </ul> 
     </nav>

Link to JSFiddle

事情是，這個菜單應該很容易下拉，從而顯示其內容。

來源

2014-02-19 user3239713

我不認爲這是一個好主意，把document.ready函數放入其他函數 – user2167382

當我刪除document.ready時，它仍然不能正常工作，不幸的是。我現在必須點擊兩次才能顯示菜單，但它會自動再次關閉。 – user3239713

我做簡單的代碼

$(function(){ 
     $('a#dropdown-button').click(function(){ 
      if(!$('#main').hasClass('active')){ 
      $('#main').addClass('active'); 
      $('#main').show(); 
     }else { 
      $('#main').removeClass('active'); 
      $('#main').hide(); 
     } 
     return false; 
    }); 
    });

這裏是jsFiddle sample

來源

2014-02-19 10:59:31 user2167382

非常感謝您的回答！不幸的是，它仍然需要點擊三次，才能打開它，我必須點擊兩次才能關閉並再次打開它。 – user3239713

希望這有助於： http://jsfiddle.net/x7xu4/2/

$(function(){ 
$("a#dropdown-button").on("click",function(event){ 
    $("#main").toggleClass('active').fadeToggle(); 
    event.preventDefault(); 
});});

由於您使用的不是jQuery的2.1 「點擊」使用「開「，因爲它節省了一點內存，我編輯了一個更簡單的解決方案的代碼。

來源

2014-02-19 11:26:44 mattts

非常感謝，這真的很接近！我只需要在我自己的設置中點擊兩次來打開菜單，這是我身邊的編碼錯誤？ – user3239713

嗯有趣。如果你可以分享完整的項目鏈接，我可能會幫助你:)。可能是一個CSS問題，甚至你的一個JS功能。 – mattts

jQuery菜單摺疊和展開三次

回答

相關問題