div下拉，當你點擊裏面的div時，上漲？

Question

我有下面的腳本來下拉一個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

Answer 1

你可以這樣說：

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

演示Fiddle

Answer 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(); 
    }); 
});