-3

这是我的代码

<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。.dish-info它应该在同一个 div 中切换。它不应该全部出现.dish-info，只是单击箭头的那个。我怎样才能做到这一点？

4

3 回答 3

2

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

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

演示

于 2013-11-15T07:43:42.197 回答
0 
$(.arrow).on('click', function ()
{
    var _this = $(this);
    _this.parent().last().toggle();
});
于 2013-11-15T07:47:17.193 回答
-1

Try this jQuery-script:

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

Here is a demo

You can find more information about the nextAll-method here

于 2013-11-15T07:41:05.333 回答