アプリ版：「スタンプのみでお礼する」機能のリリースについて

折りたたみタグ　他を閉じる（非表示にする）

解決済

  • 質問者：rinoglda
  • 質問日時：
  • 回答数：11件

折りたたみリンクが複数ある場合で、
一つ開くと他の開いた折りたたみリンクが閉じる（常に表示されるのは一つだけ）スクリプトを探しています。

以下のタグを使わせて頂いてます。

function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "category_" + inputData );
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
}else{
objID.style.display='none';
objID.className='close';
}
}

<a href="javascript:void(0)" id="category_@@@@" onClick="show('@@@@');">
リンク
</a>
<div id="layer_@@@@" style="display:none" class="close">
隠れた内容
</div>

http://homepage3.nifty.com/kmyh/gaku/hyouzi2.html
こちらで見つけたので、少しの修正でなんとかできないかと上記の使っている
ものを少しずついじって試してみたのですが、動かなくなるだけでしたので、
丸々スクリプトを取り替えてみたのですが、何が悪かったのか動きませんでした…。

既にたくさん使用しているので、できれば丸々とりかえるのではなく、
簡単な修正で変更できたらいいなと思っております…。

ご助力よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (11件中1～10件)

No.3ベストアンサー

  • 回答者： dscripty
  • 回答日時：

[ANo.1] さんの回答で、すぐに JavaScript がかけないなら、


↓をつかうのは、止めたほうがいいかも。

http://homepage3.nifty.com/kmyh/gaku/hyouzi2.html

ほかの人が書いた、JavaScript を修正しようとしても、DOM の操作(※)が自由にできなければ、どのみちすぐにまた、つまずくから。

※ DOM の操作
http://www.w3.org/TR/DOM-Level-2-Core/ecma-scrip …


今回の質問についてだけなら JavaScript ライブラリを使うことをすすめるよ。

『jQuery UI - Accordion Demos & Documentation』
http://jqueryui.com/demos/accordion/


(1) jQuery と jQuery UI をダウンロード
http://jqueryui.com/download

UI Core は次の 2個だけチェック
[*] Core
[*] Widget

Interactions は全部チェックしない

Widgets は次の 1個だけチェック
[*] Accordion

Effects は全部チェックしない

最後に Theme を [No Theme] に変更して、[Download] ボタンをクリック。


(2) ダウンロードした、JavaScript ファイル下のように配置する。
 - HTML ファイル.html
 - jquery-1.5.1.js
 - ui/jquery.ui.core.js
 - ui/jquery.ui.widget.js
 - ui/jquery.ui.accordion.js

(3) HTML ファイルの中の head タグで JavaScript を読み込む。
<head>
  <script src="jquery-1.5.1.js" type="text/javascript"></script>
  <script src="ui/jquery.ui.core.js" type="text/javascript"></script>
  <script src="ui/jquery.ui.widget.js" type="text/javascript"></script>
  <script src="ui/jquery.ui.accordion.js" type="text/javascript"></script>


(4) つづけて、下のスクリプトを記述する。
  <script type="text/javascript">
  $(function() {
    $( "#accordion" ).accordion({ animated:false });
  });
  </script>
</head>


(5) 折りたたみをする部分を下のように記述する。
<div id="accordion">
  <h3><a href="#">項目(1)のタイトル</a></h3>
  <div>項目(1)のコンテンツ</div>
  <h3><a href="#">項目(2)のタイトル</a></h3>
  <div>項目(2)のコンテンツ</div>
  <h3><a href="#">項目(3)のタイトル</a></h3>
  <div>項目(3)のコンテンツ</div>
  <!-- 必要なだけ h3 と div の繰り返し -->
</div>

おわり。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

通報する
お礼日時：2011/06/20 15:35

No.11

  • 回答者： mikemike7
  • 回答日時：

>正直ちんぷんかんぷんな初心者です。


>自分で解決できるよう頑張ります。
初心者でもわかるように。
現在のソースから変更できるように。
No2では記載したつもりですが。
No2のソース見ました？？？

No2を見て、どこを書き換えればわからない。
ということならお手上げです。

まあ、自分でなんとかするならそれも勉強。
頑張ってね＾＾

>『この 2つの回答って、つまり表現をかえて、同じことしてるだけだよね？』
そういうつもりで書いたわけじゃないですが、
まあ、そういう感じもしますねえ。

全ての方が、HTML、CSS、構造を理解できているとは限らないわけですし。
JavaScript関係の解説サイト見ても、こういうところを指摘しているサイトって少ないんじゃないですかねえ。
だから、むしろ理解できていない方のほうが多いように思います。

私も完全に理解できていませんし、
初めの頃は全く気にしていませんでした（＾＾；

むしろJavaScriptと、HTML、CSSは全く別物だと思ってたかなあ
    • good
    • 0
    • 件
通報する

No.10

  • 回答者： dscripty
  • 回答日時：

まだ、閉じられてなかった！よかった。



[ANo.9] の訂正。

プログラマの事実を表していないので撤回。
『ちなみに、body にスクリプトを書 かないのは [ANo.3] がプログラマ というよりはデザイナ(※)よりだか らだよ。』

プログラマもデータとロジックの分離を尊ぶよね。
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： dscripty
  • 回答日時：

「うーん……。

」
ごめーん。コードに『あそび』がなかったから、どんな意図で書いたのか知りたくて、ちょっと突っついてみただけ。

ちなみに、body にスクリプトを書かないのは [ANo.3] がプログラマというよりはデザイナ(※)よりだからだよ。
どうしても表示が遅いのが気になるなら document の onload イベントの Listener 関数で src 要素を遅延ロードさせるかな？

(※ デザイナ) body 要素の中に、スクリプトや文書構造とは関係ないレイアウトの為の div 要素や id や class をつけるのを美しくないと感じたり、嫌悪する傾向がある。


「No3,No4の回答はもっともな話だと思いますが、」
『この 2つの回答って、つまり表現をかえて、同じことしてるだけだよね？』というみかたがあるのかぁ。そういわれればそうかも。



※ コードのインデントは でつけようキャンペーン中！
    • good
    • 0
    • 件
通報する

No.8

  • 回答者： mikemike7
  • 回答日時：

また無駄にレスしてみたり...悪い癖...



質問内容では、参考URLにない、クラス名をclose、openに変更されているわけなので、そういうところも考慮して作っているのでしょう。
考慮していないとしたら、後から気づいて学習することでしょう。
それは一つの経験ですよね。

No3,No4の回答はもっともな話だと思いますが、
そもそもDOMとかCSSが理解できない段階だとしたら、
今後のことを考慮して作り直せと言う方が酷な気がします。
私が同じ状態だったら？？？？だと思うなあ。
わかってる人にとっては案外簡単なことでも、
わかってない人にとってみたら？？？なことはよくあるし。

質問内容の最後に、簡単に修正したいとあったし、それに応じたソースを提示し、今後のアドバイスとして書いていたら、スマートに解決してたんじゃないかなあとか思ったり。
と、レス伸ばしてるのは私のせいかもしれないけど...。

まあ、質問者さんもありがとうだけお礼があっただけなので、進展あったかどうかもわからないけど、いきなり別世界みたいな話されて諦めたのかなとか勝手に思ったり。

やってみれば以外と簡単に仕上がるかもよ。
頑張って＾＾
    • good
    • 0
    • 件
通報する
この回答へのお礼

どうぞ、とされてるサイトから引用させて頂いていた
スクリプトだったので、それぞれの意味は正直ちんぷんかんぷんな初心者です。
ご指摘通りなんだかわざわざ難しい上級者向けのように書かれて諦めました。
自分で解決できるよう頑張ります。ありがとうございました。

通報する
お礼日時：2011/06/23 11:29

No.7

  • 回答者： Chaire
  • 回答日時：

うーん……。



No.4 の最初のコードは No.0 の a 要素の書き換えだけで済みます。『初期化はご自分で』と書いたのは、要するに style="display: none" を付ければ良いことに気づくかどうか、です（昔はこれもどうかと思っていましたが、今は許容しています）。実は『簡単な修正』で済むのですが、まあ。

後半はオマケですが、キー操作と音声ブラウザ対応を視野に入れています。案外簡単にできますでしょ？

で、No.2 に関してですが、
> var divobj = document.getElementsByTagName('div');
> for (var i = 0; i < divobj.length; i++){
> if (divobj[i].className == "open"){

割といろんなサンプルで class="open|close" が濫用されていますし、ブログシステムなんかで div もかなり濫用されていますので、これだと絞り込みが大雑把すぎるのです。それで No.4 では探索範囲を絞って、かつ ID の先頭が同じもの（"section-" や "layer_"）だけを対象にしています。もし質問者氏が親ブロックを設けなければ、同階層を探索します。

別にコードの内容を理解する必要はないでしょう。ワープロを使うのに C++ を覚える必要はないですし、BBS を設置するのでさえ CGI/PHP の知識は必要ではありません。私としましては、初心者がそれをコピペし、参考にしても問題ないかどうかを一つの目標としています。どんなに長くてもコピペはすぐにできますし、それ以上何の設定もいらないようには作ってありますよ。

それと、No.3 は良いと思うのですが、(3) で head ではなく body 末尾、あるいはセクション末尾に外部ファイルをまとめて下さい。この場合、head にまとめるメリットがありませんし、むしろページ描画が遅くなるデメリットがあります。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： dscripty
  • 回答日時：

「質問の主旨とは違って、根本的に見直すように指摘されている方 もいますが、……」



心配するほどのことでは、ないとおもうよ。
質問者さんが、あのコードを選ぶなんてあり得ないでしょ？


ちなみに [ANo.3] は、質問者さんの選択の幅を、ひろげたかっただから、本気で DOM の操作を覚えるなら、まずは [ANo.2] さんのコードで、いろいろ試してみるといいとおもう。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： mikemike7
  • 回答日時：

質問の主旨とは違って、根本的に見直すように指摘されている方もいますが、全ての人がプロではないわけで、提供する目的も人それぞれ。


結局自分のやりたいことが実装できればそれで良いと私は思っています。

確かに質問内容に出てきたソースにはいろいろと問題があるかもしれませんが、それでも構築次第ではそれなりに動きます。
No2で提示したソースは、提示されたソースを元に書き換えたものですが、IE6～8、FireFox、クローム、Opera、Safariと主要なブラウザ全てで検証済みです。

全てのWEBページが完璧なはずもないわけで、完璧を目指そうと思えば相当な努力が必要になります。
プロでも完璧に程遠い人が多いのに初心者が完璧に近い形でできるわけがないですよね。

誰でも初めは初心者です。
初心者からいきなり上級者にはなれないわけで、向上心は必要だと思いますが、少しずつ知識や経験を深めて、ステップアップしていけばいいと私は思いますよ。

現時点でのソースを少し修正して実装したいということなら、No.2のソースで実現可能だと思いますので、良ければお試し下さい。

頑張って下さい＾＾
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： Chaire
  • 回答日時：

ID があるなら活用すべきです。

それと、href="javascript:..." なんてのは NN4 の遺物ですので、もう止めて下さい。

<a href="#section-1" onclick="return GAccordion.call(this, event);">ラベル 1</a>
<a href="#section-2" onclick="return GAccordion.call(this, event);">ラベル 1</a>
<a href="#section-3" onclick="return GAccordion.call(this, event);">ラベル 1</a>

<div>
　<div id="section-1">...</div>
　<div id="section-2">...</div>
　<div id="section-3">...</div>
</div>

<script type="text/javascript">

// IE 5.5+
function GAccordion (e) {
　var c = e.currentTarget || this;
　var d = c.ownerDocument;
　var s;

　if ((s = c.getAttribute('href' /*@cc_on, 2@*/))) {
　　var id = s.slice (1);
　　var div;

　　if ((div = d.getElementById(id))) {
　　　id = /^(.*)(\d+)$/.exec (id);

　　　if (id[2]) {
　　　　var prefix = id[1];
　　　　var n;

　　　　for (n = div.parentNode.firstChild; n; n = n.nextSibling) {
　　　　　if (n.nodeType === 1 && n.id && n.id.indexOf(prefix) === 0) {
　　　　　　n.style.display = 'none';
　　　　　}
　　　　}
　　　　div.style.display = ''; // CSSOM
　　　}
　　}
　}
　return false;
}
</script>

初期化はご自分で。どの道、スクリプトが動かない利用者は一定数いますので、そういった場合の代替措置は絶対に必要です。それができないとしたら、下手に仕掛けなど設けない方が無難です。

---
最近のブラウザなら（手抜き）。

<style type="text/css">

@media only screen {
　*[role~="tab"] {
　　cursor: pointer;
　}

　*[role~="tab"][tabindex="0"] {
　　font-weight: bold;
　　color: #800;
　}

　*[role~="tabpanel"][aria-hidden="true"] {
　　display: none;
　}
}
</style>

<ul role="tablist">
　<li role="tab" id="tab-1" tabindex="0">ラベル 1</li>
　<li role="tab" id="tab-2" tabindex="-1">ラベル 2</li>
　<li role="tab" id="tab-3" tabindex="-1">ラベル 3</li>
</ul>

<div role="group">
　<div role="tabpanel" aria-labelledby="tab-1" aria-hidden="false">...</div>
　<div role="tabpanel" aria-labelledby="tab-2" aria-hidden="true">...</div>
　<div role="tabpanel" aria-labelledby="tab-3" aria-hidden="true">...</div>
</div>

<script type="application/javascript">

if (document.implementation &&
//　document.implementation.hasFeature ('Selectors-API', '1.0') &&
　　document.implementation.hasFeature ('Events', '2.0') &&
　　document.implementation.hasFeature ('HTML', '2.0')) {

var GAccordion = {
　handleEvent: function (e) {
　　var t = e.target;
　　var d = t.ownerDocument;

　　if (this.isTab (t)) {
　　　var tab = t;

　　　switch (e.type) {

　　　case 'focus' :
　　　　this.activate (tab, t.parentNode.querySelector ('*[role~="tab"][tabindex="0"]'));
　　　　return;

　　　case 'keydown' :
　　　　switch (e.keyCode) {

　　　　case 0x26: // DOM_VK_UP
　　　　　for (t = tab; t = t.previousSibling; ) {
　　　　　　if (this.isTab (t)) {
　　　　　　　t.focus ();
　　　　　　　break;
　　　　　　}
　　　　　}
　　　　　return;

　　　　case 0x28: // DOM_VK_DOWN
　　　　　for (t = tab; t = t.nextSibling; ) {
　　　　　　if (this.isTab (t)) {
　　　　　　　t.focus ();
　　　　　　　break;
　　　　　　}
　　　　　}
　　　　　return;
　　　　}
　　　}
　　}
　},

　isTab: function (n) {
　　return n.nodeType === Node.ELEMENT_NODE && n.getAttribute ('role') === 'tab';
　},

　activate: function (tab1, tab2) {
　　var d = tab1.ownerDocument;
　　var tp = '*[role~="tabpanel"]';

　　tab2.setAttribute ('tabindex', '-1');
　　Array.forEach (d.body.querySelectorAll (tp + '[aria-labelledby~="' + tab2.id + '"]'), function (tabpanel) {
　　　tabpanel.setAttribute ('aria-hidden', 'true');
　　});

　　tab1.setAttribute ('tabindex', '0');
　　Array.forEach (d.body.querySelectorAll (tp + '[aria-labelledby~="' + tab1.id + '"]'), function (tabpanel) {
　　　tabpanel.setAttribute ('aria-hidden', 'false');
　　});
　}
};

document.addEventListener ('focus', GAccordion, true);
document.addEventListener ('keydown', GAccordion, false);
}
</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

簡単な修正でできることではないのですね。
ご回答ありがとうございました。

通報する
お礼日時：2011/06/20 15:35

No.2

  • 回答者： mikemike7
  • 回答日時：

とりあえず無駄なところは省きましょうね。



><div id="layer_@@@@" style="display:none" class="close">
classで切り替えるのにdisplayをnoneにしたりblockにするのは効率がよくありません。

<style type="text/css"><!--
div.close{display:none;}
div.open{display:block;}
--></style>
として
<div id="layer_@@@@" class="close">
とするべきです。
そうすることで、HTMLに無駄な記載をしなくても良くなりますし、
JavaScript部でも無駄な処理がなくなります。

以下ソースです。

// CSS部
div.close{display:none;}
div.open{display:block;}

// JavaScript部
function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "category_" + inputData );
if(objID.className=='close') {
// OPENされているDIVを閉じる
var divobj = document.getElementsByTagName('div');
for (var i = 0; i < divobj.length; i++){
if (divobj[i].className == "open"){
//divobj[i].style.display='none';
divobj[i].className='close';
}
}
//objID.style.display='block';
objID.className='open';
}else{
//objID.style.display='none';
objID.className='close';
}
}

// HTML部
<a href="javascript:void(0)" id="category_@@@@" onClick="show('@@@@');">リンク</a>
<a href="javascript:void(0)" id="category_2" onClick="show('2');">リンク2</a>
<a href="javascript:void(0)" id="category_3" onClick="show('3');">リンク3</a>
<div id="layer_@@@@" class="close">
隠れた内容
</div>
<div id="layer_2" class="close">
隠れた内容2
</div>
<div id="layer_3" class="close">
隠れた内容3
</div>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

通報する
お礼日時：2011/06/20 15:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報