アピ子です。
コーダーのオッコ先輩より、ご指導いただいたメモになります。
【課題】
１段目のアコーディオンを開いた時、２段目のアコーディオンに設置したリンクが作動してしまう。
【解決】
クローズした時、ulを隠す
オープンした時、ulを表示
■jQuery
書き込むファイル ： ec-common.js
//--------------------サイドバーアコーディオン--------------------//
$(function(){
$('#side_category01, #side_category02').on('click', function(){
- $(this).toggleClass('open', 500);
+ $(this).toggleClass('open');
if($(this).hasClass('open')) {
- $(this).find('ul').show();
+ $(this).find('ul').show(500);
} else {
- $(this).find('ul').hide();
+ $(this).find('ul').hide(500);
}
});
});
■tpl(html)
<head>
<script src="/libs/jquery/jquery/jquery-3.5.1.min.js"></script>
</head>
：
：
<div id="side_category">
<div class="side_category_box">
<nav>
<ul>
<li id="side_category01" class="side_category uk-margin-bottom">01ALL
<div class="btn">
<span></span>
<span></span>
</div>
<ul>
<li><a href="" title="side_category01-1">side_category01-1</a></li>
<li><a href="" title="side_category01-2">side_category01-2</a></li>
<li><a href="" title="side_category01-3">side_category01-3</a></li>
<li><a href="" title="side_category01-4">side_category01-4</a></li>
<li><a href="" title="side_category01-5">side_category01-5</a></li>
</ul>
</li>
<li id="side_category02" class="side_category uk-margin-bottom">02ALL
<div class="btn">
<span></span>
<span></span>
</div>
<ul>
<li><a href="" title="side_category02-1">side_category02-1</a></li>
<li><a href="" title="side_category02-2">side_category02-2</a></li>
<li><a href="" title="side_category02-3">side_category02-3</a></li>
<li><a href="" title="side_category02-4">side_category02-4</a></li>
<li><a href="" title="side_category02-5">side_category02-5</a></li>
</ul>
</li>
<li class="uk-margin-top">
<ul>
<li class="border_none"><input class="uk-checkbox" type="checkbox">03ALL</a></li>
<li class="border_none"><input class="uk-checkbox" type="checkbox">side_category03-1</a></li>
<li class="border_none"><input class="uk-checkbox" type="checkbox">side_category03-2</a></li>
<li class="border_none"><input class="uk-checkbox" type="checkbox">side_category03-3</a></li>
<li class="border_none"><input class="uk-checkbox" type="checkbox">side_category03-4</a></li>
<li class="border_none"><input class="uk-checkbox" type="checkbox">side_category03-5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
■CSS
/* サイドバー アコーディオン */
#side_category ul ul{
padding: 0;
}
#side_category li li:first-child {
border-top: 1px solid #e5e5e5;
}
#side_category li {
list-style: none;
cursor: pointer;
}
#side_category a {
text-decoration: none;
}
#side_category {
/*margin: 6em auto;*/
}
#side_category .side_category_box {
width: 100%;
}
#side_category .side_category ul {
color: #666;
display: none;
margin: 0;
padding: 0;
position: relative;
}
#side_category .side_category li {
height: 0;
opacity: 0;
margin-bottom: 0;
}
#side_category .side_category a {
color: #666;
display: block;
margin: 0;
padding: 10px;
}
#side_category01 {
padding: 10px;
background: #fff;
color: #666;
border: 1px solid #e5e5e5;
border-radius: 5px;
}
#side_category02 {
padding: 10px;
background: #fff;
color: #666;
border: 1px solid #e5e5e5;
border-radius: 5px;
}
#side_category03 {
padding: 10px;
background: #fff;
color: #666;
border: 1px solid #e5e5e5;
border-radius: 5px;
}
#side_category01 a:hover {
background: #e5e5e5;
}
#side_category02 a:hover {
background: #e5e5e5;
}
#side_category03 a:hover {
background: #e5e5e5;
}
#side_category .open li {
height: auto;
opacity: 1;
}
#side_category .btn {
padding-top: 1.2rem;
float: right;
}
#side_category .btn span {
background: #9e9e9e;
display: block;
width: 10px;
height: 2px;
}
#side_category .btn span:nth-child(2) {
position: relative;
top: -2px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
#side_category .open .btn span:first-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(45deg);
transition: 1.5s;
}
#side_category .open .btn span:nth-child(2) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
transition: 1.5s;
}
#side_category .open li:first-child {
margin: 10px 0 0 0;
}
.border_none {
border-top: none !important;
}
#side_category .uk-checkbox {
margin-right: 1rem
}トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は :hover や :active のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。
筆者プロフィール｜DXジュン（Apice Technology 代表）
「tecn」を運営している DXジュン です。
Apice Technology株式会社の代表として、20年以上にわたり Web制作・業務システム開発・業務改善支援に携わっています。
普段は中小企業向けに、在庫管理・予約管理・受発注管理など、業務を効率化するためのシステム開発やDX支援を行っています。
tecnでは、業務改善のヒントやWebシステムの仕組み、「技術が暮らしを少し便利で楽しくする」をテーマに、現場目線で分かりやすく情報発信しています。
最近は在庫管理のDX化に力を入れており、SKU・JAN・棚卸・バーコード運用など、現場で役立つ実践的なノウハウを発信しています。
また、小規模事業者向けの無料ツール 「アピスminiシリーズ」も公開しています。
🔗 Apice Technology（会社HP）
🔗 音を楽しむ【耳スタ】
🔗 在庫管理システムの機能紹介
記事が皆さまの仕事や日常のヒントになれば幸いです。
コメント