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

JQueryで困っています。
“リンクをクリックするとページ内のアコーディオンメニューが開く”という動きにしたいのですが、どのようにソースをかけばいいのかわかりません。
以下は、わかるところまで作成したソースです。
どなたかわかる方ご教授お願い致します。


●質問者: asatanweb
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

【HTML】

<p>テスト内容の詳細は<a href="#test1" onclick="point()">こちら</a><p> //←こちらの部分をクリックすると開く
<p><a href="#test2" onclick="point()">テストです。</a></p>

<ul id="menu">
<li><div class="archive"><a id="#test1"></a>テスト1</div>
<ul class="subMenu">
<li>
テストです。
</li></ul></li>
<li><div class="archive"><a id="#test1"></a>テスト2</div>
<ul class="subMenu">
<li>
テストです。
</li></ul></li>
<li><div class="archive"><a id="#test1"></a>テスト3</div>
<ul class="subMenu">
<li>
テストです。
</li></ul></li></ul>

【JQuery】

$(function point(){
 $('.subMenu').hide();
 $('#menu .archive').click(function(e){
 if($(this).is(".selected")){
 $(this).removeClass("selected");
} else {
$(this).addClass("selected");}
 $('+ul.subMenu',this).slideToggle();
 });
});

1 ● Lhankor_Mhy
ベストアンサー

間違ってると思うところを指摘します。頑張ってください。

  1. loadイベントでpointを定義しているので、グローバルスコープから呼び出せない。
  2. そして、呼び出すまでもなくイベントを捕まえて走ってる。
  3. だからonclickはいらない。
  4. point関数の中でclickイベントをアタッチしているが、セレクタが間違っている。
  5. そして、thisを使ってslideToggleメソッドを使っているので、単純にセレクタを「こちらの部分」に指定しても動作しない。
  6. だから、ソースを根本的に変える必要がある。




ちなみに、「こちらの部分」をクリックした時に表示されてほしい部分はどこなんでしょう? テスト1の下ですか?


asatanwebさんのコメント
ご回答ありがとうございます。 根本的にソースを変える必要があるのですね。 ご指摘いただいたところをふまえながらもう一度考えてみます。 テスト1の下の「テストです。」を表示させる動きにさせたいです。
関連質問

●質問をもっと探す●



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