使用 JavaScript CSS 的下拉菜单

Pull down menu using JavaScript CSS

本文关键字：下拉菜单 CSS JavaScript 使用      更新时间：2023-09-26

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

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事件仅工作一次。

在

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

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

用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();
}
});
相关文章：