1

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

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

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

0

3 ответа 3

1

Vue-way:

HTML:

<label class="label-title" @click="visibility=!visibility"><p>SELECT</p></label>
<ul :class="{'visible': visibility}">...</ul>

JS (если уже есть data, просто добавляете туда visibility):

data: {
   visibility: false
}

CSS (.dropdown-checkbox:hover ul - это, естественно, сносим):

ul.visible {
    display: block !important;
}

И не надо городить всякие querySelector'ы, Vue создан, чтобы максимально обходиться без этого.

1

const p = document.querySelector('label');
const dropdown = document.querySelector('ul');

p.addEventListener('click', menuBlock)

function menuBlock(e){
  dropdown.classList.toggle('d');
}
.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;
}

ul{
  display: none;
}

.d{
  display: block;
}

.label-title{
  margin-top: 100px;
}
<label class="label-title"><p>SELECT</p></label>

<div class="dropdown-checkbox">

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

0
0

самое простое, что пришло на ум

function foo(){
  document.getElementById(<<id>>).style.display = 'block';
}

Делаете функцию с любыми доп условиями и вешаете её на кнопку

<button onclick="foo()" id=<<id>> </button>

id нажатой кнопки так же можно получить сразу, тут описано как.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.