什么是这个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代码的正确选择器？

回答

相关问题