Question

这是我的代码

<div class="dish">
    <div class="arrow"></div>
    <div class="title">рисовая каша с филе индейки и брокколи</div>
    <div class="add"></div>
    <div class="dish-info">
        <div class="info-left">
            <div class="dish-thumbnail">
                <img class="thumbnail" src="images/dish-pic.png" />
                <div class="dish-time">
                    <span class="time">45</span> <span class="minutes">мин</span>
                </div>
            </div>
            <div class="dish-information">
                <h1>ингридиенты</h1>
                <p>700 г филе индейки</p>
                <p>1 лукавица репчатого лука</p>
                <p>1 морковь</p>
                <p>200 г риса «Арборио»</p>
                <p>1/2 л воды</p>
                <p>50 мл сливок 20%</p>
                <p>200 г брокколи</p>
                <p>1 пучок укропа</p>
                <p>Соль, перец по вкусу</p>
            </div>
        </div>
        <div class="info-right">
            <p>1. Филе индейки вымыть, нарезать мелкими кусочками. Лук и морковь почистить и нарезать мелкими кубиками.</p>
            <p>2. Положить нарезанную индейку в чашу мультиварки, залить водой и включить программу «СУП» на 1 час.</p>
            <p>3. После завершения программы «СУП» вынуть индейку из бульона.</p>
            <p>4. Бульон процедить и снова залить в чашу мультиварки, посолить, добавить укроп.</p>
            <p>5. Брокколи разобрат на соцветия. Добавить в бульон индейку, промытый рис и мелко нарезанные лук и морковь. Включить программу «КРУПЫ» на 30 минут.</p>
            <p>6. После завершения программы добавить сливки, перемешать и поставить на программу «КРУПЫ» еще на 10 минут.</p>
            <div class="add-dish"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

有很多.dish和.dish-info。点击.arrow时。它应该在同一个div中切换.dish-info。它不应出现所有.dish-info s，只是单击箭头的那个{{1}}。我怎么能这样做？

Answer 1

您可以使用.siblings(selector)，因为dish-info div是arrow

的兄弟

$(".arrow").click(function() {
    $(this).siblings(".dish-info").toggle();
});

DEMO

Answer 2

$(.arrow).on('click', function ()
{
    var _this = $(this);
    _this.parent().last().toggle();
});

Answer 3

试试这个jQuery脚本：

$(".arrow").click(function() {
    $(this).nextAll('.dish-info').toggle();
});

这是demo

您可以找到有关nextAll-method here

的更多信息

在这个jQuery中切换div

3 个答案: