メニューをクリックするとアイコンがマイナスになりません。
下記のようなコードなのですが、どこを改善すればよいでしょうか?
どこがネックになっているかわからなかったのでjavascript得意な方見ていただけませんでしょうか?
プラス(+)マイナス(-)機能が機能しません。
js
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 2<script type="text/javascript"> 3$(function(){ 4 $("#menu > li > p.accordion_icon").removeClass('active'); 5 $("#menu > li > ul").hide(); 6 $("#menu > li").on("click",function(){ 7 $(this).siblings("li").find('> ul').slideUp(); 8 $(this).siblings("li").find('> p.accordion_icon').removeClass('active'); 9 $(this).find('> ul').slideToggle(800); 10 $(this).find('> p.accordion_icon').toggleClass('active'); 11 }); 12}); 13</script>
html
1<ul id="menu"> 2<li><a href="#">●×●×</a></li> 3<li><a href="#" class="menus">●×●×<p class="accordion_icon"><span></span><span></span></p></a> 4<ul class="child" > 5<li><a href="#">●×●×</a></li> 6<li><a href="#">●×●×</a></li> 7<li><a href="#">●×●×</a></li> 8</ul> 9</li> 10</ul>
css
1 2 3ul#menu li{ 4 5 background-color: #f8f8f8; 6 border-top: solid 1px #e3e3e3; 7 border-bottom: solid 1px #e3e3e3; 8} 9 10ul#menu li a{ 11 color: #000000; 12 text-decoration: none; 13 display: block; 14 padding: 15px; 15 16} 17 18ul#menu li a:hover{ 19 text-decoration: underline; 20 background: #e3e3e3; 21} 22 23ul#menu li a:before { 24 display: block; 25 content: ""; 26 position: absolute; 27 -webkit-transform: rotate(45deg); 28 transform: rotate(45deg); 29 left: 235px; 30 width: 8px; 31 height: 8px; 32 margin-top: 4px; 33 background: #393939; 34} 35ul#menu li a:after { 36 display: block; 37 content: ""; 38 position: absolute; 39 -webkit-transform: rotate(45deg); 40 transform: rotate(45deg); 41 left: 233px; 42 width: 8px; 43 height: 8px; 44 margin-top: -12px; 45 background: #f8f8f8; 46} 47 48ul#menu li a:hover:after { 49 background: #e3e3e3; 50} 51 52ul#menu li a.menus:before { 53 display: block; 54 content: ""; 55 position: absolute; 56 -webkit-transform: rotate(0deg); 57 transform: rotate(0deg); 58 left: 231px; 59 width: 0px; 60 height: 0px; 61 margin-top: 0px; 62 background: #393939; 63 font-weight: bold; 64} 65 66ul#menu li a.menus:after { 67 display: block; 68 content: ""; 69 position: absolute; 70 -webkit-transform: rotate(0deg); 71 transform: rotate(0deg); 72 left: 233px; 73 width: 0px; 74 height: 0px; 75 margin-top: -12px; 76 background: #f8f8f8; 77} 78 79ul#menu li a.menus:hover:after { 80 background: none 81} 82 83/*アイコンプラスマイナス*/ 84.accordion_icon, 85.accordion_icon span { 86 display: inline-block; 87 transition: all .4s; 88 box-sizing: border-box; 89} 90.accordion_icon { 91 position: relative; 92 width: 25px; 93 height: 25px; 94 float: right; 95 margin-right: -7px; 96 /* margin-top: -90px; */ 97} 98.accordion_icon span { 99 position: absolute; 100 left: 6px; 101 width: 50%; 102 height: 2px; 103 background-color: black; 104 border-radius: 4px; 105 -webkit-border-radius: 4px; 106 -ms-border-radius: 4px; 107 -moz-border-radius: 4px; 108 -o-border-radius: 4px; 109} 110.accordion_icon span:nth-of-type(1) { 111 top: 5px; 112 transform: rotate(0deg); 113 -webkit-transform: rotate(0deg); 114 -moz-transform: rotate(0deg); 115 -ms-transform: rotate(0deg); 116 -o-transform: rotate(0deg); 117} 118.accordion_icon span:nth-of-type(2) { 119 top: 5px; 120 transform: rotate(90deg); 121 -webkit-transform: rotate(90deg); 122 -moz-transform: rotate(90deg); 123 -ms-transform: rotate(90deg); 124 -o-transform: rotate(90deg); 125} 126/*+、-切り替え*/ 127.accordion_icon.active span:nth-of-type(1) { 128 display:none; 129} 130.accordion_icon.active span:nth-of-type(2) { 131 top: 5px; 132 transform: rotate(180deg); 133 -webkit-transform: rotate(180deg); 134 -moz-transform: rotate(180deg); 135 -ms-transform: rotate(180deg); 136 -o-transform: rotate(180deg); 137} 138 139 140 141 142ul#menu ul.child{ 143 display: none; 144 padding: 0; 145 background: #e3e3e3; 146 width: 275px; 147 -moz-box-sizing: border-box; 148 -webkit-box-sizing: border-box; 149 -o-box-sizing: border-box; 150 -ms-box-sizing: border-box; 151 box-sizing: border-box; 152 153} 154 155ul#menu ul.child li{ 156 border-top: none; 157 border-bottom: none; 158 margin-left: 70px; 159 padding-left: -15px !important; 160 background: #e3e3e3; 161 color: #000000; 162 list-style-type: disc; 163} 164 165 166ul#menu ul.child li a{ 167 background: #e3e3e3; 168 display: block; 169 text-decoration: none; 170 color: #000000; 171 -moz-box-sizing: border-box; 172 -webkit-box-sizing: border-box; 173 -o-box-sizing: border-box; 174 -ms-box-sizing: border-box; 175 box-sizing: border-box; 176} 177 178ul#menu ul.child li a:hover{ 179 text-decoration: underline; 180} 181 182 183ul#menu ul.child li a:before { 184 display: none; 185} 186ul#menu ul.child li a:after { 187 display: none; 188} 189ul#menu ul.child li a:hover:after { 190 display: none 191} 192コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/04 03:24
2018/07/04 04:04
2018/07/04 04:17
2018/07/04 04:23
2018/07/04 04:43
2018/07/04 04:48
2018/07/04 04:49