我有一个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>
事情是,这个菜单应该很容易下拉,从而显示其内容。
我不认为这是一个好主意,把document.ready函数放入其他函数 – user2167382
当我删除document.ready时,它仍然不能正常工作,不幸的是。我现在必须点击两次才能显示菜单,但它会自动再次关闭。 – user3239713