web-dev-qa-db-ja.com

コンテンツを表示または非表示にするためにページまたは投稿に「もっと表示する」を使用する方法

投稿やページ内のテキストを隠したり表示したりするために、組み込みの "WYSIWYG"ボタンshow moreを使いたい場合はどうしますか？

私は機能の誤解から始めました。クリックした後に残りのコンテンツを表示する「もっと読む」ボタンを使って、機能が実際に私が必要としているもの、すなわちロード中のコンテンツの一部を隠すためのものだと思った。

しかし、そうではなかったので、とにかくそれを使用するための解決策を探しました。私がそれを機能させたかった方法でそれを使うために、あなたは言うことができました。

私はオンラインで解決策を見つけることができなかったので、私は自分自身の解決策を開発し始めなければなりませんでした。

注 （意図したとおりにread-moreタグを使用する（テキストのどの部分をフロントページやアーカイブなどにティーザーとして表示する必要があるかを示すために））解決策はそのままです。しかし、これには少しHTMLを追加して簡単に修正することができます。これについては、回答の最後に追加します。

jqueryread-more
1
Rvervuurt

「続きを読む」タグを含む投稿には、<p>と呼ばれるmore-#というspanを含むID内に#-タグがありますいずれかの番号。次のようになります。

<p>
   <span id="more-1"></span>
</p>

特定のスパンを選択し、変数内に保存する必要がありました。

var $showMore = $('span[id*="more-"]');

show more- spanに何らかのテキストを追加するために、jQueryの.html()を使用しました。

$showMore.html("Read more <i class='icon-down-open-big'></i>");

もちろん、AFTER the read more- tagはロード時に非表示にする必要がありました。これは、1レベル上に（.parent()を使用して）実行し、次のすべてのブロックを選択することで実行できますその親の中。これは、.nextAll()を使用して実行できます。これは、現在のブロックの後のすべてのブロックを選択します（もちろん、親ブロックが閉じるまで）。

この選択は後で使用されるため、変数内にも保存しました。

var $showMoreNext = $showMore.parent().nextAll();

これですべてのセレクタができました。ロードするときに非表示にし、Read moreがクリックされたときに表示するだけです。

$showMoreNext.hide(); // to hide all elements after the Read more tag

$showMore.on('click', function() {
   $showMoreNext.toggle("slow");
});

toggleを使用すると、タグを再度クリックして、元々隠されていたコンテンツをすべて非表示にすることができます。

したがって、Wordpressのインビルド「詳細」タグの後にアコーディオンのような拡張を行うために必要なのは、次のjQueryのビットだけです。

var $showMore = $('span[id*="more-"]');
$showMore.html("Læs mere <i class='icon-down-open-big'></i>");
var $showMoreNext = $showMore.parent().nextAll();
$showMoreNext.hide();

$showMore.on('click', function() {
  $showMoreNext.toggle("slow");
});

今、実際に「もっと読む」機能を既に使用している場合はどうなりますか？

次の2つの解決策があります。

1）「続きを読む」タグを「乱用」したいページにのみ上記のjQueryを含めます2）希望する場所にテキストに配置する小さなhtmlを作成します。それに応じてjQueryを適合させてください。

1
Rvervuurt