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

Question

ktmthrk

1

1もっと見る

100pt

コンピュータウェブ制作

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など教えてもらえると非常に助かります。

回答の条件

1人10回まで

登録：2011/04/08 13:36:55
終了：2011/04/08 18:29:55

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

TransFreeBSD · Answer 1 · 2011-04-08T15:33:33+09:00

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でアコーディオンを仕込むだけです。

Cherenkov · Answer 2 · 2011-04-08T18:00:22+09:00

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

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

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

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

以下のようにすれば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>

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

回答（2件）

TransFreeBSD6682682011/04/08 15:33:33

Cherenkov15044932011/04/08 18:00:22

コメント（0件)

この質問への反応（ブックマークコメント）