在下拉菜单中添加div

Question

So I want to make a cool type of drop down menu using jquery, but I dont know how to add anything to the place were I want it. Basically, there is a button that you press which expands this other div, and then on double click it goes back up. I want the other div to have other div links in it but I don't know how.

Here's my html:

<div id = "one"></div>

<div id = "two"></div>

<div id = "three"></div>

<div id = "four"></div>

<div id = "five"></div>

<div id = "six"></div>

<div id = "one1"></div>

<div id = "two2"></div>

<div id = "three3"></div>

<div id = "four4"></div>

<div id = "five5"></div>

<div id = "six6"></div>

Here's my jquery (ignore the comments and arrows):

$('#one1').click(function(){
    $('#one').animate({height: '200px'}, "fast");
    $('body').append('<div id = "tester"></div>');
});

$('#two2').click(function(){
    $('#two').animate({height: '200px'}, "fast");
});

$('#three3').click(function(){
    $('#three').animate({height: '200px'}, "fast");
});

$('#four4').click(function(){
    $('#four').animate({height: '200px'}, "fast");
});

$('#five5').click(function(){
    $('#five').animate({height: '200px'}, "fast");
});

$('#six6').click(function(){
    $('#six').animate({height: '200px'}, "fast");
});

Answer 1

You need something like this :

$('div').click(function(){
  $(this).animate({height: '200px'}, "fast");                                                                        
}).dblclick(function(){
  $(this).animate({height: '0px'}, "fast");         
});

Example : https://jsfiddle.net/DinoMyte/vxn3ozzb/6/

Answer 2

I created a plain navBar which I think it is what you are trying to do.

This may help as a jumpstart to add the animation you want: check JsFiddle here

Html

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li class="dropdown"><a href="#">About</a>
            <ul>
                <li><a href="#">About us</a></li>
                <li><a href="#">About the company</a></li>
                <li><a href="#">More</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

nav > ul {
    padding: 0;
    margin: 0;
    float: left;
}

nav > ul > li {
    padding: 0;
    margin: 0;
    list-style: none;
    float: left;
    position: relative;
}

nav > ul > li.dropdown > ul {
    display: none;
    position: absolute;
    top: 100%;
    width: 200px;
    background: #BF0A64;
    margin: 0;
    padding: 0;
}

nav > ul > li.dropdown > ul > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li.dropdown > ul > li > a {
    display: block;
    padding: 10px;
    color: #FFF;
    text-decoration: none;
}

nav > ul > li.dropdown > ul > li > a:hover {
    background: #FFF;
    color: #BF0A64;
}

nav > ul > li.dropdown.active a {
    background: #BF0A64;
}

nav > ul > li.dropdown.active > ul {
    display: block;
}

nav > ul > li > a {
    padding: 20px;
    color: #FFF;
    background: #E80C7A;
    text-decoration: none;
    display: block;
}

nav > ul > li > a:hover {
    background: #BF0A64;
}

nav:after,
div:after {
    clear: both;
}

Javascript

(function() {
    var dropdowns = document.getElementsByClassName('dropdown');

    function init() {

        for (var i = 0; i < dropdowns.length; i++) {
            var item = dropdowns[i];

            item.onclick = showOrHideSubmenu;
        }
    }

    function showOrHideSubmenu() {
        //    hideAllActives(this);
        this.classList.toggle('active');
    }


    function hideAllActives() {
        for (var i = 0; i < dropdowns.length; i++) {
            var item = dropdowns[i];
            if (hasClass(item, 'active')) {
                item.classList.toggle('active');
            }
        }
    }

    function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }

    init();

}());