Question

我希望为导航栏创建一个非常简单的下拉菜单，非常类似于Bootstrap的下拉菜单的工作原理 - 没有Bootstrap（我的导航栏中有一些常规链接和一些下拉链接）。基本上我想要的是提出一些带有一些js，可能还有一些CSS可以实现以下HTML代码：

<ul class="main-nav">
    <li><a href="index.html">HOME</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">ACCOUNT <b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li><a href="change_pass.html">CHANGE PASSWORD</a></li>
        </ul>
    </li>
</ul>

我真的不知道从哪里开始这样的事情。我花了几个小时试图整理一个全CSS的方式，但我的CSS刚开始干扰自己，我有点放弃了。我真的不知道任何js但是我觉得应该有一种非常简单的方法可以通过单击链接来打开和关闭js的下拉样式。我甚至尝试了很长一段时间来实现其他人推出的js下拉脚本和其他基本上做到的StackOverflow答案，但他们的HTML结构与我的显着不同，我不知道足够的js来重组他们的代码。 / p>

在这一点上，我不仅仅满足于最简单的方式 - 一个下拉链接，当点击它时，会打开一个单色矩形＆＃39;链接堆放在其中。我知道要求很多，但如果有人能指出我正确的方向，那将非常感激。我为没有显示更多代码而道歉，但在整天工作之后，我真的没有任何有用的东西可供展示。

Answer 1

我们的想法是使用dropdown-menu隐藏display: none，当其父dropdown拥有类open时，您可以使用display: block向其显示切换我们使用js的类。

＆＃13;

$(document).ready(function(){
    $("[data-toggle='dropdown']").click(function(e) {   
        $(this).parents(".dropdown").toggleClass("open");  /*when you click on an element with attr data-toggle='dropdown' it toggle the class "open" on its parent with class "dropdown"*/
        e.stopPropagation();
    });

    $("html").click(function() {
        $(".open").removeClass("open");  /*when you click out of the dropdown-menu it remove the class "open"*/
    });
});

＆＃13;

.main-nav{
    background: deepskyblue;
    padding: 0;
}

.main-nav li{
    list-style: none;
    display: inline-block;
    position: relative; /*with respect to this element dropdown-menu is positioned*/
}

.dropdown-menu{
    display: none;   /*hide the menu*/
  
    /*this style are just to position the menu*/
    position:absolute;
    top: 100%;
    left: 0;
}

.open .dropdown-menu{
    display: block;  /*show the menu when its parent has class "open"*/
}

a.nav-item{
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    cursor: pointer;
}

.dropdown-menu{
    background: skyblue;
    padding: 10px;
    border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
    <li><a class="nav-item" href="index.html">HOME</a></li>
    <li><a class="nav-item" href="contact.html">CONTACT</a></li>
    <li class="dropdown">
        <a class="nav-item dropdown-toggle" data-toggle="dropdown">ACCOUNT <b class="caret">></b></a>
        <ul class="dropdown-menu">
              <li><a href="change_pass.html">CHANGE PASSWORD</a></li>
        </ul>
    </li>
</ul>

＆＃13;

以上只是一个指向正确方向的基本示例，大多数CSS代码只是为了使这个例子变得可行，重要的部分都被注释了。

简单的Toggle-able JS下拉菜单

1 个答案: