質問箱/5267

質問箱/5267 †

カテゴリ	デザイン・CSS・スキン
サマリ	見出しの折りたたみ表示
バージョン	1.5.1
投稿者	しろ
状態	質問
投稿日	2017-07-25 (火) 15:16:54

↑

質問†

ページが長くなったのでwikipedia(mediawiki)のように見出しを折りたたみたいのですがやり方がわかりません。検索してもサイドバーのリンクなどを階層化するためのプラグインのようなものしか出てこなくてずっと探しています。

どなたかご教示いただけませんか？

↑

回答†

「折りたたみ」でこのWikiを検索すると自作プラグイン/region.inc.phpが出てきます。お試しください。 -- [[..]] 2017-07-26 (水) 04:27:13
回答ありがとうございます。質問する前に調べて出てきたのがそのプラグインなので既に導入しているのですが「なんかちがう…」と思って質問させて頂いた次第です。 -- しろ 2017-07-26 (水) 13:33:16
出来るだけ見た目をwikipediaに近づけたいのですがやはり難しいのですかね…プラグインを改造してもしっくりこないんですよね… -- しろ 2017-07-26 (水) 13:35:37
PCからWikipediaを閲覧した場合、Pukiwikiでのcontentsで表示される見出しへのリンク部分がJavaScriptで折りたたまれます。スマートフォンからのアクセスの場合には、contentsに当たる部分はなく、見出しのみ表示でその下の記事部分が折りたたまれた状態になりますね。どっちのことを指しているのかわかりませんがMediaWikiはHTML5対応済みなので、pukiwikiで同じことをしたいというならそのあたりからどうにかしないといけないんじゃないでしょうか -- 2017-07-26 (水) 23:01:45
Wikkpediaにスマートフォンでアクセスするとそのような折り畳み表示になりますね。これはプラグインでなくて本体に手を入れるのが良さそうです。JavaScriptだけでなんとかならないかな… -- umorigu 2017-07-27 (木) 08:43:57
回答ありがとうございます。言葉足らずで申し訳ありません、スマートフォンで閲覧した際に見出しのみ表示され記事部分が折り畳まれる方です。html5ですかー…スキンはbootstrapのをお借りして使用しているのでスマホ対応はしているのですが、スキンを改造すればどうにかなりますかね？ -- しろ 2017-07-27 (木) 11:25:20
本体を手に入れるとはmediawikiの事でしょうか？導入できる環境ではないので使い慣れたpukiwikiでどうにかならないかなぁと思ったのですが、Javascriptで似たような感じになりますかね…？ -- しろ 2017-07-27 (木) 11:34:10
「本体に手を入れる」というのはPukiwiki本体を改造するという意味です。-- 2017-07-27 (木) 12:46:46
あっ、そっちでしたか！すみません見間違えてました…cssで見出しをdivで囲んでそこに開閉するjsを適用させる、という発想は出たのですがこれだと弄る部分が多そうですね… -- しろ 2017-07-27 (木) 22:35:25
本体の改造については質問箱/2068//dev:BugTrack/2148が、jqueryを使用する場合は「//stabucky.com/wp/archives/2463 jQueryのnextUntilを使う | You Look Too Cool（外部サイト）」が参考になると思います。素のjavascriptは知識不足で書けませんでした。 -- 2017-08-13 (日) 18:56:32
遅くなりまして申し訳ございません、回答ありがとうございます！参考サイトを見ながらjQueryを使用したところとてもそれっぽくなって感動しました…！ただ、一度見出し(**のh3に指定しました)を出すとそれより下の部分がページ最下部まで見出し毎に全て折りたたまれてしまうのですが、特定の見出し(h3)のみ折りたたみ、他の見出し(*のh2や***のh4など)は折りたたまない方法はないでしょうか…h4の見出しを途中で入れたら解除出来るかなと思い試してみましたが巻き込まれてそのまま折りたたまれてしまいました… -- しろ 2017-08-15 (火) 16:48:47
あ、すみません、よく考えたら見出し毎に折りたたまれるのはwikipediaでも仕様でした。見出しと見出しの間に通常の文章などを挟みたいときに解除する方法がございましたら教えて頂けますと幸いです。 -- しろ 2017-08-15 (火) 17:35:20

:not()で特定の見出しは折りたたまないようにできます。 -- 2017-08-15 (火) 19:34:43

//jquery
$(function() {
	$('[id^="content_"]:not(h4)').nextUntil('[id^="content_"]').hide();

	$('[id^="content_"]:not(h4)').click(function() {
		$(this).nextUntil('[id^="content_"]').fadeToggle('fast');
	});

});

返事が遅くなり申し訳ございません。なるほど、jQueryは色々と出来るのですね…勉強になります。詳しく教えてくださってありがとうございました！ -- しろ 2017-08-20 (日) 12:45:06

PukiWikiについて

Info in English

このサイトについて
- WebTrack
- Web委員日誌

お試し
- PukiWiki 1.5

↑

Developer

質問箱/5267†

質問†

回答†

最新の16件

質問箱/5267 †