-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の s が表示されるのではなく、矢印がクリックされたものだけが表示されます。どうやってやるの？

4

3 に答える 3

2

div はの兄弟であるため、.siblings(selector)を使用できますdish-infoarrow

$(".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

このjQueryスクリプトを試してください：

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

ここにデモがあります

nextAll メソッドの詳細については、こちらを参照してください。

于 2013-11-15T07:41:05.333 に答える