简单下拉菜单 div

Question

我正在努力处理一个简单的下拉菜单 link。我有一个带有文本 link 的 div，单击此文本时应该会出现另一个带有文本信息的 div。

到目前为止 HTML 是：

<div id="about" class="fluid">
    <a href="#">About & Contact</a>

    <div id="dropdown" class="fluid"><blockquote>
          We are a bla bla...</div>
</div>

我使用 CSS 来隐藏下拉菜单 div:

#dropdown {display: none;}

而 jQuery 函数是：

<script>
    $(function(){
        $('#about').each(function(){
            $(this).click(function(){
                $(this).siblings('#dropdown').slideToggle(300);            
            });
        });
    });
</script>

任何帮助将不胜感激，非常感谢。

Answer 1

    $("#about").find("a:first-child").click(function() {
$("#dropdown").toggle();
return false;
});

将其用作您的 js。在这里我使用了查找选择器..因为这比其他选择器更快。

Answer 2

另一种方法是使用下面的代码

$("#about  a").click(function() {
    $("#dropdown").toggle();
    return false;
});

https://jsfiddle.net/santoshjoshi/n0yeo9nb/

简单下拉菜单 div

Simple dropdown div

html

css

jquery

dropdown