Question

所以我想使用jquery创建一个很酷的下拉菜单类型，但我不知道如何添加任何东西到我想要的地方。基本上，你按下一个按钮会扩展另一个div，然后双击它会重新启动。我希望其他div有其他div链接，但我不知道如何。

这是我的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>

这是我的jquery（忽略评论和箭头）：

$('#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

你需要这样的东西：

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

示例：https://jsfiddle.net/DinoMyte/vxn3ozzb/6/

Answer 2

我创建了一个普通的navBar，我认为这是你想要做的。

这可以作为添加所需动画的快速入门：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();

}());

在下拉菜单中添加div

2 个答案: