課題でアコーディオンを作成しています
アコーディオンはタブをクリックしたら
開いていたタブが閉じてクリックしたタブ
が開くしくみをつくっています
HTMLとJavaScriptとcssを使って作成しています
自分がわかるところまではコードを書いたのですがクリックしても反応がないので
間違ってる記述、不足のきじ記述などの場所などを教えて頂きたいです
⤵︎ ︎HTMLです
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Accordion Test</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="accordion"> <div id="accordion-a"> <div class="ac-title">メニューa（クリックすると開きます）</div> <div class="ac-content">ここにはメニューaの内容が入ります。</div> </div> <div id="accordion-b"> <div class="ac-title">メニューb（クリックすると開きます）</div> <div class="ac-content">ここにはメニューbの内容が入ります。</div> </div> <div id="accordion-c"> <div class="ac-title">メニューc（クリックすると開きます）</div> <div class="ac-content">ここにはメニューcの内容が入ります。</div> </div> <div id="accordion-d"> <div class="ac-title">メニューd（クリックすると開きます）</div> <div class="ac-content">ここにはメニューdの内容が入ります。</div> </div> <div id="accordion-e"> <div class="ac-title">メニューe（クリックすると開きます）</div> <div class="ac-content">ここにはメニューeの内容が入ります。</div> </div> <div id="accordion-f"> <div class="ac-title">メニューf（クリックすると開きます）</div> <div class="ac-content">ここにはメニューfの内容が入ります。</div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="main.js"></script> </body> </html>⤵︎ ︎JavaScriptです
$('.ac-title').on('click', function(e) {
// hrefにページ遷移しない
e.preventDefault();
// 同じsection内の.accordion-contentを選択
var content = $(e.target)
.closest('section')
.find('.ac-content');
// .accordion-contentが非表示の場合は
if (!http://content.is(':visible')) {
// 表示中のコンテンツを閉じる
$('.ac-content:visible').slideUp();
// クリックされたコンテンツを表示 content.slideDown();
}
});
まだ回答がついていません
会員登録して回答してみよう
