jqueryについて質問です。


今jqueryを勉強してるんですが、なかなか難しくてお知恵を拝借したく、書き込みました。

slideToggleを使ってアコーディオンぽいものを作ったんですが、
http://wb3.sakura.ne.jp/test/
展開時に「閉じる」を押した時にアコーディオンを閉じたいのですが
どうしたらいいかわかりません。

アドバイス、よろしくお願いします!

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/05/07 15:38:01
  • 終了:2013/05/07 17:57:19

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562013/05/07 16:28:47

ポイント80pt

こんな感じでしょうか。

$(document).ready(function() {

  $("div.accordion").click(function(){
    $(this).next().slideToggle("fast");
  });
  
  $(".bellow").hide();

  // ※以下の三行を追加
  $(".bellow a").click(function() {
    $(this).parent().slideToggle("fast");
  });

});

↑は、元のコードを、なるべくそのままにしました。
「閉じる」の Aタグに class か id で目印を付けた方が素直ですよね、きっと。

<script type="text/javascript">

$(document).ready(function() {

  $("div.accordion").click(function(){
    $(this).next().slideToggle("fast");
  });
  
  $(".bellow").hide();

  // ※以下の三行を追加
  $("a.accordion_close").click(function() {
    $(this).parent().slideToggle("fast");
  });

});

</script>


<div class="accordion" style="border:1px solid #000; padding:5px;">ひらく</div>
<div class="bellow" style="border:1px solid #000; padding:5px;">
test<br>test<br>
<!-- ※ A タグに、クラス accordion_close を追加 -->
<a class="accordion_close" href="#">閉じる</a>
id:pxi13773

ありがとうございます!
完璧です。
精進します…。

2013/05/07 17:57:58

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562013/05/07 16:28:47ここでベストアンサー

ポイント80pt

こんな感じでしょうか。

$(document).ready(function() {

  $("div.accordion").click(function(){
    $(this).next().slideToggle("fast");
  });
  
  $(".bellow").hide();

  // ※以下の三行を追加
  $(".bellow a").click(function() {
    $(this).parent().slideToggle("fast");
  });

});

↑は、元のコードを、なるべくそのままにしました。
「閉じる」の Aタグに class か id で目印を付けた方が素直ですよね、きっと。

<script type="text/javascript">

$(document).ready(function() {

  $("div.accordion").click(function(){
    $(this).next().slideToggle("fast");
  });
  
  $(".bellow").hide();

  // ※以下の三行を追加
  $("a.accordion_close").click(function() {
    $(this).parent().slideToggle("fast");
  });

});

</script>


<div class="accordion" style="border:1px solid #000; padding:5px;">ひらく</div>
<div class="bellow" style="border:1px solid #000; padding:5px;">
test<br>test<br>
<!-- ※ A タグに、クラス accordion_close を追加 -->
<a class="accordion_close" href="#">閉じる</a>
id:pxi13773

ありがとうございます!
完璧です。
精進します…。

2013/05/07 17:57:58
id:Lhankor_Mhy No.2

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312013/05/07 16:38:47

ポイント20pt

うーん、こんな感じでしょうか。

$('a').on('click',function(e){
  e.preventDefault();
  $(this).parents(".bellow").slideToggle("fast");
})
id:Lhankor_Mhy

id:a-kuma3をコピペしたみたいにカブったなこりゃ……

2013/05/07 16:40:04
id:pxi13773

いえいえ、回答ありがとうございます。
助かりました。

2013/05/07 17:58:42

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません