0

リンクがクリックされたときにコンテンツを表示する「ドロップダウン」を作成するために、slideToggle を使用しました。

「営業時間を見る」をクリックすると、時間を表示するdivが表示されます。

問題は、私のページに、営業時間が異なる複数の異なる場所があることです。SO 1 つの関数を使用して、リンクをクリックすると、すべての非表示の div が開きます。関連する div にリンクを 1 つだけリンクするにはどうすればよいですか?

JSFiddle

HTML:

    <div class="timeList">
    <a>See opening times</a>
    <p class="openingTimes" style="display: none;">
    <strong>Mon-Fri</strong>: 7am - 5.30pm<br />
    <strong>Sat</strong>:<br />
    <span class="seasonTimes"><em>Summer</em>: 7.30am - 5.30pm<br />
    </span>
    <span class="seasonTimes"><em>Winter</em>: 8am - 5pm<br />
    </span>
    <span class="seasonTimes"><em>November - March</em>: 8am - 1pm<br />
    </span>
    <strong>Sun</strong>: Closed
    </p>
    </div>
<br /><br />
 <div class="timeList">
    <a>See opening times</a>
    <p class="openingTimes" style="display: none;">
    <strong>Mon-Fri</strong>: 8am - 5.30pm<br />
    <strong>Sat</strong>:<br />
    <span class="seasonTimes"><em>Summer</em>: 90.30am - 5.30pm<br />
    </span>
    <span class="seasonTimes"><em>Winter</em>: 10am - 5pm<br />
    </span>
    <strong>Sun</strong>: 10am - 5.30pm
    </p>
    </div>

jQuery:

$(".timeList a").click(function () {
  $(".openingTimes").slideToggle("slow");
});
4

3 に答える 3

2

<p class="openingTimes">切り替えたい要素は、イベントを処理している の次の兄弟な<a>のでclick、単純な DOM トラバーサルを使用して、次の要素への参照を取得できます。

$('.timeList a').click(function(e) {
    $(this).next().slideToggle('slow');
});

関数の内部にthisは、アンカーの実際の DOM 要素があり、$(this)その要素を含む jQuery オブジェクトを作成.next()し、DOM でその後にある要素を取得してから、明らか.slideToggle('slow')に実際の切り替えを行います。

必要に応じて、セレクターを渡して.next()、次の要素もセレクターに一致する場合にのみ選択することができます。各要素内に複数のアンカーがある場合は、次の<div class="timeList">使用を検討することをお勧めします。

$(this).next('.openingTimes').slideToggle('slow');

代わりは。あなたが示したHTMLでは、それは必要ありません。

于 2013-03-08T10:31:01.207 に答える
0

以下のコードを試してください

$(".timeList a").click(function () {
    $(this).parent('.timeList').children(".openingTimes").slideToggle("slow");
});
于 2013-03-08T10:33:11.327 に答える
0

あなたのコードの問題は..クラスですべてのdivを選択しopeningtimes、slideToggleを使用していました..ブラウザは呼び出しで2つを見つけるため.. openingtimes両方のdivをスライドさせます...

参照を使用$(this)してクリックされた要素を取得し、そのブロックの divopeningTimesを見つけてスライドさせることができます

これを試して

$(this).parent().find(".openingTimes").slideToggle("slow");

また

$(this).next().slideToggle("slow");

ここで働くフィドル

于 2013-03-08T10:30:53.787 に答える