什麼是這個jQuery slideUp代碼的正確選擇器？

我正在使用基金會創建一個頁面，我將有多個摺疊按鈕。當你點擊按鈕時，其中的隱藏內容將滑落，如果有任何擴展按鈕，它們將滑動。什麼是這個jQuery slideUp代碼的正確選擇器？

我有這個部分工作，但因爲我有成對的兩個按鈕我無法弄清楚正確的選擇器來獲取擴展的div關閉，無論他們的位置。

這裏是我的HTML：

<div class="large-6 columns"> 
    <div class="box"> 
     Initial Content 
     <div class="hidden"> 
      This is hidden content 
     </div> 
    </div> 
    <div class="box"> 
     Initial Content 
     <div class="hidden"> 
      This is hidden content 
     </div> 
    </div> 
</div> 

<div class="large-6 columns"> 
    <div class="box"> 
     Initial Content 
     <div class="hidden"> 
      This is hidden content 
     </div> 
    </div> 
    <div class="box"> 
     Initial Content 
     <div class="hidden"> 
      This is hidden content 
     </div> 
    </div> 
</div>

CSS：

.box { 
    height:auto; 
    background:#000; 
    color:#fff; 
    cursor:pointer; 
    width:200px; 
    margin-bottom:1em; 
} 
.hidden { 
    height:200px; 
    display:none; 
} 
    .hidden.open { 
     display:block; 
    }

和Javascript：

$(document).ready(function() { 
    $('.box').click(function() { 
     $(this).find('.hidden').slideToggle(); 
     $(this).siblings().find('.hidden').slideUp(); 
     return false; 
    }); 
});

這裏是一個JSFiddle證明什麼，我有這麼遠。

來源

2014-06-20 APAD1

它的工作完美。你究竟需要什麼？檢查這個http://jsfiddle.net/6C42Q/27/。刪除第2行'$（this）.siblings（）。find（'。hidden'）。slideUp（）;'只需find（）'就夠了 –

也適用於我。你正在使用哪種瀏覽器？ – musicnothing

@ShaunakD - 點擊第三個框，然後點擊第二個框。看看第三個盒子如何保持打開狀態，因爲它位於不同的div組中？ – j08691

你可以添加一行來照顧它：

$(this).parent().siblings().find('.hidden').slideUp();

jsFiddle example

來源

2014-06-20 16:33:41 j08691

完美。非常感謝你！ – APAD1

什麼是這個jQuery slideUp代碼的正確選擇器？

回答

相關問題