尝试用jquery slideDown click方法替换div

时间:2017-08-20 11:04:10

标签: jquery html

我试图在点击一个元素后用另一个替换div,但我似乎无法让它工作。我在下面包含了HTML和jquery代码。尝试滑入的元素的css属性为display:none。

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");
    });

任何人都能看到阻止它滑落的原因吗?当然,非常感谢所有帮助!

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
$(".nutrition-description").click(function(){
$(this).nextAll(".nutrition-breakdown").slideDown("fast");
});
&#13;
.nutrition-breakdown{
display:none;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

您的代码不起作用的原因是因为您使用.find()方法来查找容器&#34;营养分解&#34;内部&#34;营养描述&#34;,这是不正确的,&#34;营养分解&#34;实际上是&#34;营养 - 描述&#34;

的兄弟姐妹

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

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

});

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