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 нажатой кнопки так же можно получить сразу, тут описано как.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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