尝试用 jquery slideDown 单击方法替换 div

Question

单击元素后，我正在尝试用另一个div 替换一个div，但我似乎无法让它工作。我在下面包含了HTML和jquery代码。尝试滑入的元素具有 display： none 的 css 属性。

.HTML：

<div class="meal-details">
<h4>heading</h4>
<h5 class="optiontabs meal-description">DESCRIPTION</h5>
<h5 class="optiontabs nutrition-description">NUTRITIONAL INFO</h5>
<div class="nutrition-breakdown">
<p>Text one</p>
</div>
<div class="meal-breakdown">
<p>Text two</p>
</div>
</div>

JQUERY：

$(".nutrition-description").click(function(){
$(this).find(".nutrition-breakdown").slideDown("fast");
});

谁能看到是什么阻止它滑落？当然，非常感谢所有的帮助！

Answer 1

使用$(this).nextAll(".nutrition-breakdown")来获取div 的.nutrition-breakdown之后的 .nutrition-细分类。

$(".nutrition-description").click(function(){
$(this).nextAll(".nutrition-breakdown").slideDown("fast");
});

.nutrition-breakdown{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meal-details">
<h4>heading</h4>
<h5 class="optiontabs meal-description">DESCRIPTION</h5>
<h5 class="optiontabs nutrition-description">NUTRITIONAL INFO</h5>
<div class="nutrition-breakdown">
<p>Text one</p>
</div>
<div class="meal-breakdown">
<p>Text two</p>
</div>
</div>

Answer 2

你的代码不起作用的原因，因为你正在使用.find((方法在"营养描述"中查找容器"营养分解"，这是不正确的，"营养分解"实际上是"营养描述"的兄弟姐妹

请使用以下代码来满足您的要求。

$(".nutrition-description").click(function(){
$(this).next().slideDown("fast");//change

}(;

如果你不需要动画，那么最好使用 .show(( 而不是 slideDown((。