How to add style when clicking on an element?

Question

css

I have a menu like this:

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

Styles:

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

I want to make the menu open not when hovering over an element, but when clicking on it.
How to add style display: block; when clicking on an element? You can use vue/html/css/js

Answer 1

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

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

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