Q&A
前提・実現したいこと
Readmore.js を使って隠れている要素を表示したいです。
発生している問題・エラーメッセージ
要素の表示・非表示が出来る仕様をさがしており、 「Readmore.js」というjQueryプラグインを使うことにしました。 http://www.dataplan.jp/blog/jquery/3001 上記のサイトを参考にしてみましたが、 『続きを読む』を押すと、隠れていた要素が全て表示されず サンプルのようにいきません。
該当のソースコード
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>もっと読む</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="readmore.js"></script> <script> $(function () { $('article').readmore({ speed: 1000, collapsedHeight: 0, moreLink: '<a href="#">続きを読む</a>', lessLink: '<a href="#">閉じる</a>' }); }); </script> <style type="text/css"> p { margin: 0; padding: 0; } article { padding: 0; margin: 0; background: #DCF6F5; } </style> </head> <body> <h1>見出しが入ります。見出しが入ります。見出しが入ります。</h1> <article> <p> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 </p> <img src="sample_img.png" alt=""> <p> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 </p> </article> </body> </html>
試したこと
オプションやCSSをいじってみましたが、さっぱりわからず、、
画像＋テキストの要素（div）を表示・非表示にできればいいので、
『Readmore.js』以外の方法でも構いません。
お力をお貸しください、、
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
手元の環境(Google Chrome 65.0.3325.162/Windows 10)では提示されたコードで正しく動いているように見受けられます。
同様のコードをjQuery 1行で以下のように記載できますので、単に開閉だけでしたらそちらの方がはやいかもしれません。
//開く $("article").slideDown('slow'); //閉じる $("article").slideUp('slow');
投稿2018/03/15 08:02
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/16 01:22