Question

我试图在点击一个元素后用另一个替换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");
    });

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

Answer 1

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

＆＃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;

Answer 2

您的代码不起作用的原因是因为您使用.find（）方法来查找容器＆＃34;营养分解＆＃34;内部＆＃34;营养描述＆＃34;，这是不正确的，＆＃34;营养分解＆＃34;实际上是＆＃34;营养 - 描述＆＃34;

的兄弟姐妹

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

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

}）;

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

尝试用jquery slideDown click方法替换div

2 个答案: