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

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;

  }

Answer 1

使用 JavaScript 是很有可能的。我是用 jQuery 做的。dropdown如果用户单击容器外部，我就会关闭dropdown。这是JS代码。$(function(){&nbsp; &nbsp; $('.dropdown .dropdown-toggle').on('click', function(e){&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault;&nbsp; &nbsp; &nbsp; &nbsp; e.stopPropagation;&nbsp; &nbsp; &nbsp; &nbsp; $(this).parents('.dropdown').toggleClass('show');&nbsp; &nbsp; });&nbsp; &nbsp; // Remove dropdown if click outside of dropdown&nbsp; &nbsp; const $menu = $('.dropdown');&nbsp; &nbsp; $(document).mouseup(e => {&nbsp; &nbsp; &nbsp; &nbsp; if (!$menu.is(e.target) // if the target of the click isn't the container...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; && $menu.has(e.target).length === 0) // ... nor a descendant of the container&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $menu.removeClass('show');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});CSS 改变。/* Before */.navigationWrap ul li.dropdown:hover ul.subNav {&nbsp; display: block;}/* After */.navigationWrap ul li.dropdown.show ul.subNav {&nbsp; display: block;}这是 HTML。<div class="navigationWrap">&nbsp; <ul>&nbsp; &nbsp; <li class="dropdown">&nbsp; &nbsp; &nbsp; <a class="dropdown-toggle" href="javascript:void(0);">&#9776; See Options</a>&nbsp; &nbsp; &nbsp; <ul class="subNav">&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Option 1</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Option 2</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Option 3</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Option 4</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Option 5</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p></p>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Option 6</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Option 7</a></li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </li>&nbsp; </ul></div>这是CodePen。

Answer 2

你可以这样做我们通过 css 切换类（添加/删除）并更改显示值document.querySelector('.dropdown').onclick = () => {&nbsp; document.querySelector('.dropdown').classList.toggle('show');};如果类.show存在那么display: block.navigationWrap ul li.show ul.subNav{&nbsp; display: block;}看一下这个