2
ユーザーがカテゴリをクリックしたときに、「新しいもの」と「カテゴリ」という2つの項目があり、そこには1つのサブカテゴリがドロップされるはずです。しかし、私はそれらを落とす方法を把握することはできません。誰にも解決策はありますか？ここではフィドルは - https://jsfiddle.net/v3ftk7t0/ドロップダウンメニューが機能しません
<div class='shop-sidebar'>
<ul class='shop-nav'>
<li class="active"><a href="#">What's New</a></li>
<li class='w-sub' data-id='shop-categories'>
<svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg>
Categories
<ul>
<li>
<a href="#">All</a>
</li>
<li>
<a href="#" class="active">Category 1</a>
<ul>
<li>
<a href="#">All</a>
</li>
<li>
<a href="#">Sub Category 1</a>
</li>
<li>
<a href="#">Sub Category 2</a>
</li>
<li>
<a href="#">Sub Category 3</a>
</li>
<li>
<a href="#">Sub Category 4</a>
</li>
<li>
<a href="#">Sub Category 5</a>
</li>
<li>
<a href="#">Sub Category 6</a>
</li>
<li>
<a href="#">Sub Category 7</a>
</li>
<li>
<a href="#">Sub Category 8</a>
</li>
<li>
<a href="#">Sub Category 9</a>
</li>
</ul>
</li>
<li>
<a href="#" class="active">Category 2</a>
<ul>
<li>
<a href="#">All</a>
</li>
<li>
<a href="#">Sub Category 1</a>
</li>
<li>
<a href="#">Sub Category 2</a>
</li>
</ul>
</li>
<li>
<a href="#" class="active">Category 3</a>
<ul>
<li>
<a href="#">All</a>
</li>
<li>
<a href="#">Sub Category 1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>CSS
.shop-sidebar {
width: 30%;
width: calc(295px);
display: inline-block;
padding-right: 65px;
vertical-align: top;
font-family: 'maison',sans-serif;
font-weight: 600;
font-size: 11px;
color: #000;
letter-spacing: 1.5px;
line-height: 18px;
text-transform: uppercase;
}
ul.shop-nav {
list-style: none;
padding: 0;
margin: 0;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li {
transition: all 0.3s;
cursor: pointer;
padding: 18px 20px;
background-color: #f8f8f8;
margin-bottom: 2px;
}
ul.shop-nav li.active a {
color: #000;
}
ul.shop-nav a {
color: #000;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li svg {
width: 10px;
height: 10px;
vertical-align: text-bottom;
fill: #000;
transition: all 0.3s;
float: right;
}
ul.shop-nav li ul {
display: none;
list-style: none;
padding-left: 0;
margin: 12px 0 0;
}
ul.shop-nav li ul li {
color: #000;
border: 0 !important;
font-family: 'maison',sans-serif;
font-size: 12px;
letter-spacing: 0;
padding: 0;
font-weight: normal;
text-transform: none;
margin-bottom: 12px;
}
ul.shop-nav li ul ul {
margin-left: 16px;
}
残念ながら、このコードは機能しませんでした。 「カテゴリ」はクリックできません。 – user6738171
カテゴリをクリックしましたか？たぶんあなたはリスト要素全体をクリックしたいと思うでしょうか？教えてください私はそれを書き直します –
私は最初にそれをチェックしたときにエラーがあったに違いありません。カテゴリをクリックするとサブメニューが表示されます。しかし、ここでカテゴリ内のカテゴリは、クリックするとサブカテゴリをプルダウンしません。 – user6738171