Simple Toggle-able JS Dropdown Menu

问题

I'm looking to make a very simple dropdown menu for a navbar, very similar to how Bootstrap's dropdown menu works - without being Bootstrap (with some regular links in my navbar and some dropdown links). Essentially what I want is to come up with some with some js and probably a little bit of CSS that will enable this to happen for the following HTML code:

<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>

I just don't really know where to start on something like this. I spent a few hours trying to put together an all-CSS way of doing this but my CSS just started interfering with itself and I kind of gave up on that. I don't really know any js but it strikes me that there should be a really easy way to toggle a dropdown style on and off with js by clicking a link. I even tried for quite a while to implement js dropdown scripts other people have put out and other StackOverflow answers that essentially did that but their HTML was structured significantly different than mine and I didn't know enough js to restructure their code.

At this point, I'd be more than content with the simplest way possible - a dropdown link that when clicked, opens up a single-colored rectangle 'under it' with the links stacked within in it. I know that's a lot to ask for, but if anyone could point me in the right direction, it would be much appreciated. I apologize for not showing more code but after working on this all day, I really just don't have anything useful to show for.

回答1:

The idea is that the dropdown-menu is hidden using display: none and when its parent dropdown has the class open then you show it using display: block, to toggle the classes we use js.

$(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"*/
    });
});

.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;
}

<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>

The above is just a basic example to point you in the right direction, most of the CSS code is just to make viable the example, the important parts are commented.

来源：https://stackoverflow.com/questions/31932556/simple-toggle-able-js-dropdown-menu

标签

javascript

jquery

html

css