0

次のようなジャッキアップされたマークアップを含む FAQ があります。

<p><strong>How can I come see the animals perform?</strong><br>
Schedules and information about attending a performance can be found here:</p>
<p><a href="http://jupmingdolphins.com">Performance tickets</a></p>
<p>If no performances are listed, it means that none are scheduled in the
near future. The animals take a break between November and May.</p>

<p><strong>What's the answer to this question?</strong><br>
It's 42, of course.</p>

<h2>Header for More Questions</h2>

<p><strong>Is it true the dolphins have smartphones?</strong><br>
Yes, they use Android phones and text each other constantly.</p>
<p><b>Just kidding!</b> They are all Apple fan-fish and prefer iPhones.</p>

(etc)

そして、私は理解しようとしています：

  1. ページの読み込み時に、質問以外のすべてを非表示にする CSS (およびおそらく jQuery)。

  2. <strong>ユーザーがラップされた質問をクリックすると、回答が下にスライドしてその下に表示される単純な jQuery 。問題は、ご覧のとおり、マークアップが (CMS のおかげで) 風変わりであり、質問と質問の間に多くの情報が含まれている可能性があることです。回答は、独自の DIV などにラップされていません。その上、FAQ 全体に H2 の小見出しがあり、H2 に触れたり、折りたたんだりしたくありません。

したがって、クリック アクションのようなコードが必要です。

$('strong').click(function() {
   // hide or reveal all elements from $(this) down,
   // and stop when we hit next <strong> or <h2>
});
4

1 に答える 1

2

編集

質問には独自のタグさえないという事実によって、これは非常に複雑になります。したがって、質問の親タグを非表示にする必要があるという厄介な場所にいますが、質問自体は表示しますが、これは基本的に不可能です。

この問題を回避するために、私がまとめたハックを次に示します。質問を複製し、独自のタグに追加します。しかし、このマークアップの作成者を説得して、より合理的なものに修正することをお勧めします。

非質問を非表示にするには、次のようなものを使用できるようです。

$("#container").children().not($("strong").parent()).not("p").hide();

答えを表示するには、おそらく次を使用できますnextUntil。

$(this).parent().nextUntil($("strong").parent()).show();

フィドル

于 2013-09-20T19:31:46.717 に答える