Как добавить стиль при нажатии на элемент?

Question

[Richard Millie]

У меня есть такое меню:

<div class="dropdown-checkbox">
                <label class="label-title"><p>SELECT</p></label>
                <ul>
                  <li><input type="checkbox" value="Tom" v-model="selector">
                    <label>Tom</label></li>
                  <li><input type="checkbox" value="Bob" v-model="selector">
                    <label>Bob</label></li>
                  <li><input type="checkbox" value="Sam" v-model="selector">
                    <label>Sam</label></li>
                  <li><input type="checkbox" value="Alice" v-model="selector">
                    <label>Alice</label></li>
                </ul>
              </div>

Стили:

.dropdown-checkbox {
      position: relative;
      display: inline-block
    }

    .dropdown-checkbox .label-title {
      font-size: 13px;

    }

    .dropdown-checkbox ul {
      position: absolute;
      bottom: -120%;
      left: 114%;
      background: #cacaca;
      list-style: none;
      min-width: 180px;
      margin: 0px;
      padding: 0px;
      display: none;
      z-index: 1;
      border: 1px solid #9c9c9c;
    }

    .dropdown-checkbox ul li {
      font-size: 15px;
      padding: 10px;
      border-bottom: 1px solid #a5a5a5;
      margin: 0px;
    }

    .dropdown-checkbox ul li input {
      margin-right: 10px;
    }

    .dropdown-checkbox:hover ul{
      display: block;
    }

Я хочу сделать так, чтобы меню открывалось не при наведении(hover) на элемент, а при нажатии(click) на него.
Как добавить стиль display: block; при нажатии на элемент? Можно использовать vue/html/css/js

Comments

[Andrew]

Не лезьте пока во Vue, почитайте про события JS и css-классы, ответ легко найдёте

Answer 1

[0xD34F]

.dropdown-checkbox ul.opened {
  display: block;
}

<label @click="opened = !opened">click me</label>
<ul :class="{ opened }">
  ...

data: () => ({
  opened: false,
}),

Comments

[Richard Millie]

Выглядит неплохо, но если выстроить 5 меню в ряд чекбоксы будут появляться под всеми 5 меню(вместо 1)

[0xD34F]

Компонент отдельный для меню сделайте.

[Richard Millie]

0xD34F , подскажите как правильно поменять код , чтобы можно было использовать item.opened вместо opened.. Просто мне нужно чтобы меню открывалось только для текущего item. Не хочу делать отдельный компонент.

[0xD34F]

data: () => ({
  opened: null,
  dropdowns: [
    { selected: [], items: [ ... ] },
    { selected: [], items: [ ... ] },
    ...
  ],
}),

<div
  v-for="n in dropdowns"
  class="dropdown-checkbox"
>
  <label @click="opened = opened === n ? null : n">
    SELECT
  </label>
  <ul :class="{ opened: opened === n }">
    <li v-for="item in n.items">
      <label>
        <input type="checkbox" :value="item" v-model="n.selected">
        {{ item }}
      </label>
    </li>
  </ul>
</div>

https://jsfiddle.net/j8xpb2k0/1/

[MikUrrey]

подскажите как правильно поменять код , чтобы можно было использовать item.opened вместо opened

Да никак.
Либо компонент, либо v-for с индексом и хранить состояние для каждого индекса