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

Question

好的，我有一个“悬停时”显示的下拉列表，有没有办法将其更改为“单击时”显示。理想情况下，仅 CSS，但也对 JS 选项开放。如果我可以将船推得更远，我还希望右上角有一个十字来关闭下拉列表。我在这里做了一个小提琴，这样你就可以看到我当前的“悬停”设置当前的 CSSul {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>

Answer 2

你可以这样做

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

document.querySelector('.dropdown').onclick = () => {

  document.querySelector('.dropdown').classList.toggle('show');

};

如果类.show存在那么display: block

.navigationWrap ul li.show ul.subNav{

  display: block;

}