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

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(){&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>

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;}