人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryを使用したよくあるアコーディオンの質問です。

[HTML]

<div id="main">

<h3 id="100" class="trigger">アコーディオン1</h3>
<dl>
<dt>hoge</dt>
<dd>hogehoge</dd>
</dl>

<h3 id="200" class="trigger">アコーディオン2</h3>
<dl>
<dt>hoge</dt>
<dd>hogehoge</dd>
</dl>

<h3 id="300" class="trigger">アコーディオン3</h3>
<dl>
<dt>hoge</dt>
<dd>hogehoge</dd>
</dl>

</div>


<div id="side">

<ul>
<li id="100">アコーディオン1</li>
<li id="200">アコーディオン2</li>
<li id="300">アコーディオン3</li>
</ul>

</div>


問題となっているのがアコーディオン開閉のトリガーとなる部分が
「div#main h3」と「div#side ul li」の2箇所存在する所です。

mainのh3とsideのliには共通のidが振られており、
例えば「div#side ul li#100」がクリックされた場合、
「div#main h3#100」を開くようにしたいと考えています。

サンプルや参考URLなど教えてもらえると非常に助かります。

●質問者: ktmthrk
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:hoge HTML jQuery UL URL
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● TransFreeBSD
●50ポイント

idは文章内でユニークである必要があり、二つの要素に同じidを付けることはできません。

ですので、h3要素は"h3_*"、li要素は"li_*"とする前提で話を進めさせていただきます。

jQueryの場合、要素のイベントは簡単に実行でき、クリックならclick()メソッドを呼べばOKです。

具体的には

$.each(["100", "200", "300"], function(){
 var elem = $("#h3_"+this);
 $("#li_"+this).click(function(){elem.click()});
});

となると思います。

あとは.mainでアコーディオンを仕込むだけです。

◎質問者からの返答

ありがとうございます。参考になります。

ちなみに"100","200","300"の部分ですがCMSで"400","500"・・・と

どんどん追加されていくものとした場合はどうすればいいでしょうか?


2 ● Cherenkov
●50ポイント

コメント欄を有効にしたほうが有益です。


>よくあるアコーディオン

>どんどん追加されていく

の意味がわかりませんが適当に書いてみました。

以下のようにすればidが重複していても大丈夫だと思います。

id重複は欠陥であることを理解してください。


demo: http://jsfiddle.net/BRwX6/


<html>
 <head>
 <style type="text/css">
 #main > dl {
 display: none;
 }
 #side {
 border: 1px solid black;
 }
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function() {
 $('#main .trigger').click(function() {
 $(this).find('+dl').toggle();
 });
 
 $('#side li').click(function() {
 $('#main #' + this.id).click();
 });
 });
 </script>
 </head>
 <body>
 <div id="main">
 <h3 class="trigger" id="100">アコーディオン1</h3>
 <dl>
 <dt>hoge</dt>
 <dd>hogehoge</dd>
 </dl>
 <h3 class="trigger" id="200">アコーディオン2</h3>
 <dl>
 <dt>hoge</dt>
 <dd>hogehoge</dd>
 </dl>
 <h3 class="trigger" id="300">アコーディオン3</h3>
 <dl>
 <dt>hoge</dt>
 <dd>hogehoge</dd>
 </dl>
 </div>
 <div id="side">
 <ul>
 <li id="100">アコーディオン1</li>
 <li id="200">アコーディオン2</li>
 <li id="300">アコーディオン3</li>
 </ul>
 </div>
 </body>
</html>
◎質問者からの返答

ありがとうございます。

まさに欲しかったサンプルです。助かりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ