前提・実現したいこと
htmlとCSS、jQueryを使ってwebページでアコーディオンメニューを作っています。
クリックしたカテゴリーを複数開くようにしたいのですが、できません。
HTMLとcssはこのままで、javascriptのみ変更したいです。
参考にした以下のサイトはクリックした以外のメニューを閉じてしまいます。
http://js.crap.jp/book/chapter2/accordion.html
javascriptを学習したばかりで、基本的なことかと思いますが、よろしくお願い申し上げます。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 6</head> 7 8<body> 9<div class="contents"> 10<ul id="accordion"> 11 <li><a href="#">カテゴリー1<span class="arrow rotate"></span></a> 12 <ul id="active"> 13 <li>サブ1</li> 14 <li>サブ2</li> 15 <li>サブ3</li> 16 </ul> 17 </li> 18 <li><a href="#">カテゴリー2<span class="arrow"></span></a> 19 <ul> 20 <li>サブ1</li> 21 <li>サブ2</li> 22 <li>サブ3</li> 23 </ul> 24 </li> 25 <li><a href="#">カテゴリー3<span class="arrow"></span></a> 26 <ul> 27 <li>サブ1</li> 28 <li>サブ2</li> 29 <li>サブ3</li> 30 </ul> 31 </li> 32</ul> 33</div> 34</body> 35</html> 36
css
1@charset "UTF-8"; 2 3#accordion{ 4 list-style: none; 5 width: 500px; 6 font-size: 16px; 7 line-height: 1; 8 background-color: #add8e6; 9 margin: 0; 10 padding: 0; 11 12} 13#accordion li a{ 14 display: block; 15 position:relative; 16 color: #333; 17 text-decoration:none; 18 padding: 15px 45px; 19 border-bottom: 1px solid #79bfd6; 20 border-top: 1px solid #eef7fa; 21} 22#accordion > li:first-child > a{ 23 border-top: 0px; 24} 25 26.arrow{ 27 position:absolute; 28 top:50%; 29 right: 30px; 30 width: 30px; 31 height: 20px; 32 line-height: 1; 33 margin-top: -10px; 34} 35.arrow:before{ 36 content: "ー"; 37} 38#accordion li > a:hover .arrow{ 39 color: #ff0000; 40} 41.rotate { 42 color:#ff0000; 43 -moz-transform: rotate(90deg); 44 -webkit-transform: rotate(90deg); 45 -o-transform: rotate(90deg); 46 -ms-transform: rotate(90deg); 47 transform: rotate(90deg); 48} 49#accordion li ul { 50 list-style: none; 51 background: #e1f1f6; 52 margin: 0; 53} 54#accordion li ul li a{ 55 position:relative; 56 background: none; 57 line-height: 1; 58 padding: 15px 70px; 59 border-top: 1px solid #fff; 60} 61 62#accordion li ul li:last-child a{ 63 border-bottom: 1px solid #5fb3ce; 64} 65#accordion li ul li a:hover{ 66 background: #d4ebf2; 67 border-top-color: #eef7fa; 68} 69
javascript
1$(function() { 2 $("#accordion li ul").hide(); 3 $("#active").show(); 4 $("#accordion > li > a").click(function(){ 5 var click = $("+ul",this); 6 click.slideDown(); 7 $("#accordion ul").not(click).slideUp(); 8 $(".arrow").removeClass("rotate"); 9 $("> .arrow",this).addClass("rotate"); 10 return false; 11 }); 12}); 13
回答2件
あなたの回答
tips
プレビュー