Измените эффект при наведении, чтобы открыть раскрывающийся список

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

Проверьте это