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

jqueryについて質問です。

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

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

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

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

▽最新の回答へ

1 ● a-kuma3
●80ポイント ベストアンサー

こんな感じでしょうか。

$(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>

pxi13773さんのコメント
ありがとうございます! 完璧です。 精進します…。

2 ● Lhankor_Mhy
●20ポイント

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

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

Lhankor_Mhyさんのコメント
id:a-kuma3をコピペしたみたいにカブったなこりゃ……

pxi13773さんのコメント
いえいえ、回答ありがとうございます。 助かりました。
関連質問

●質問をもっと探す●



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