div 下拉菜单，当您在 div 内单击时会上升？答案

【问题标题】：div dropdown, goes up when you click inside the div?div 下拉菜单，当您在 div 内单击时会上升？
【发布时间】：2013-10-24 11:41:08
【问题描述】：

我有以下脚本来下拉一个 div。正确的是，当我在div外点击或者选择另一个div向下时，已经滴下来的div正在向上。

但是当我点击 div 中的任何内容时，它不应该上升？

Javascript：

$(document).ready(function() {
    $('#favorite_holder').click(function(e) {
        $('#favorite_container').slideToggle("fast");
        $('#account_container').slideUp("fast");
        $('#cart_container').slideUp("fast");
        e.stopPropagation();
    });

    $('#account_holder').click(function(e) {
        $('#account_container').slideToggle("fast");
        $('#favorite_container').slideUp("fast");
        $('#cart_container').slideUp("fast");
        e.stopPropagation();
    }); 

    $('#cart_holder').click(function(e) {
        $('#cart_container').slideToggle("fast");
        $('#favorite_container').slideUp("fast");
        $('#account_container').slideUp("fast");
        e.stopPropagation();
    });

    $(document).click(function(){
        $('#favorite_container, #account_container, #cart_container').slideUp("fast");
    });
});

HTML：

<div id="favorite_holder">
    <span class="price">click here</span>
</div>
<div id="favorite_container" style="display: none;">
    content here...
</div>
<div id="account_holder">
    <span class="price">click here</span>
</div>
<div id="account_container" style="display: none;">
    content here two ...
</div>
<div id="cart_holder">
    <span class="price">click here</span>
</div>
<div id="cart_container" style="display: none;">
    <form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>
</div>

jsfiddle

【问题讨论】：

@laras: 你不想在任何 div 外点击时向上滑动？
重构jsfiddle.net/GVYEd/15
是的，我希望它在单击 div 或另一个 div 外部时上升。
感谢您的帮助，现在可以正常使用了！

标签： jquery html dropdownbox

【解决方案1】：

你可以这样做：

$('#favorite_container, #account_container, #cart_container').click(function(e){
    e.stopPropagation();
})

演示Fiddle

【讨论】：

【解决方案2】：

使用 html 和 javascript 的简单方法：

HTML：

<div id="favorite_holder" class="parent">
    <span class="price">click here</span>

<div id="favorite_container"  class="child" style="display: none;">
    content here...
</div>
</div>

<div id="account_holder" class="parent">
    <span class="price">click here</span>

<div id="account_container" class="child" style="display: none;">
    content here two ...
</div>
</div>


<div id="cart_holder" class="parent">
    <span class="price">click here</span>

<div id="cart_container" class="child" style="display: none;">
    <form>
        First name: <input type="text" name="firstname" /> <br\>
        Last name: <input type="text" name="lastname" />
    </form>
</div>
</div>

javascript：

$(document).ready(function() {
    $('.parent').click(function() {
        $('.child').slideUp("fast");            
        $(this).find("div").slideDown("fast");           
    });


    $('.child').click(function(e) {
        e.stopPropagation();
    });   
});

【讨论】：