使用JavaScript CSS下拉菜单

时间:2015-03-11 01:33:35

标签: javascript html css

我正在尝试制作一个下拉菜单,该菜单会在点击时显示并消失。

JSFiddle

的JavaScript

function visible(x) {
    var apple = document.getElementById('pulldown'+x);
    if (apple.style.display = "none")
    {
        apple.style.display = "block";
    }

}

这样可以正常工作,但是在将其添加到上面的代码中 -

else {
     apple.style.display = "none";
}

onclick事件仅适用一次。

2 个答案:

答案 0 :(得分:0)

在if条件中使用==而不是=

if (apple.style.display == "none")

答案 1 :(得分:0)

如何用jquery的力量实现它?

首先我们将元素(锚标记)作为触发器,然后第二个元素是隐藏的菜单

HTML

<a href="#" class="pulldowntrigger">Pull down</a>
<div class="themenu" style="display: none;">menu content here</div>

jquery的

// when click the anchor tag with a class pulldowntrigger
$('.pulldowntrigger').click(function(){
// check if the class themenu is hidden
if ($(this).next('.themenu')).is(":hidden"){
// yes its hidden! then slide it down (show)
$(this).next('.themenu').slideDown();
}else{
//nah! its not, then slide it up (hide)
$(this).next('.themenu').slideUp();
}
});