更改悬停效果以单击显示下拉列表

Question

好的，我有一个下拉列表，显示为"悬停时"，有没有办法将其更改为"单击时"。理想情况下，只使用CSS，但也对JS选项开放。如果我能把船推得更远，我也想在右上角画一个十字架来关闭下拉列表。

我在这里做了一把小提琴，这样你就可以看到我当前的"悬停"设置

当前CSS

ul {
padding: 15px;
list-style: none;
text-align: center;
}
.navigationWrap ul li {
width: 100%;
float: left;
color: #000;
font-size: 16px;
position: relative;
}
.navigationWrap ul li a {
text-decoration: none;
color: #000;
display: block;
}
.navigationWrap ul li a:hover {
color: #000;
background-color: #e6ffe6;
}
.navigationWrap ul li ul.subNav {
position: absolute;
width: 95%;
padding: 10px;
background-color: #fff;
border: #4399fc solid 1px;
display: none;
z-index: 999;
left: 0;
top: 100%;
text-align: left;
max-height: 350px;
overflow: auto;
overflow-x: hidden;
}
.navigationWrap ul li ul.subNav li {
float: left;
width: 100%;
font-size: 20px;
letter-spacing: 1px;
padding-bottom: 10px;
}
.navigationWrap ul li ul.subNav a {
float: left;
width: 100%;
transition: all 0.3s ease-in-out;
display: block;
}
.navigationWrap ul li ul.subNav li a:hover {
color: #000;
padding-left: 10px;
}
.navigationWrap ul li ul.subNav li.active a {
color: #04A000;
}
.navigationWrap ul li.dropdown:hover ul.subNav {
display: block;
}

HTML代码

<div class="navigationWrap">
<ul>
<li class="dropdown">&#9776; See Options<ul class="subNav">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li>
<p></p>
</li>
<li><a href="#">Option 6</a></li>
<li><a href="#">Option 7</a></li>
</ul>
</li>
</ul>
</div>

非常感谢，杰森。

Answer 1

使用JavaScript的可能性很大。我是通过jQuery完成的。如果用户在dropdown容器外部单击，则我关闭了dropdown。

这是JS代码。

$(function(){
$('.dropdown .dropdown-toggle').on('click', function(e){
e.preventDefault;
e.stopPropagation;
$(this).parents('.dropdown').toggleClass('show');
});
// Remove dropdown if click outside of dropdown
const $menu = $('.dropdown');
$(document).mouseup(e => {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
$menu.removeClass('show');
}
});
});

CSS更改。

/* Before */
.navigationWrap ul li.dropdown:hover ul.subNav {
display: block;
}
/* After */
.navigationWrap ul li.dropdown.show ul.subNav {
display: block;
}

这是HTML。

<div class="navigationWrap">
<ul>
<li class="dropdown">
<a class="dropdown-toggle" href="javascript:void(0);">&#9776; See Options</a>
<ul class="subNav">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li>
<p></p>
</li>
<li><a href="#">Option 6</a></li>
<li><a href="#">Option 7</a></li>
</ul>
</li>
</ul>
</div>

这是CodePen。

Answer 2

您可以执行此

我们通过css 切换类(添加/删除(并更改显示值

document.querySelector('.dropdown').onclick = () => {
document.querySelector('.dropdown').classList.toggle('show');
};

如果类别.show存在，则display: block

.navigationWrap ul li.show ul.subNav{
display: block;
}

看看这个