Вопрос:

Я хочу щелкнуть элемент, чтобы переключить класс, на который ссылается совершенно не связанный элемент (не дочерний, родительский или братский)

javascript html5 css3

24 просмотра

1 ответ

10 Репутация автора

Я хочу щелкнуть элемент, чтобы переключить класс, на который ссылается совершенно не связанный элемент (не дочерний, родительский или братский)

Например, изначально код будет выглядеть так:

<div class="persons_contacts_details glyphicon glyphicon-option-vertical"></div>
          <div class="drop_content">
            <div class="nav_item">
              Edit
            </div>
            <div class="nav_item">
              Move to...
            </div>
            <div class="nav_item_remove">
              Remove
            </div>
          </div>

CSS:

.drop_content {
    display: none;
}
.show {
    display: block;
    z-index: 44;
    position: absolute;
    top: -7px;
    right: -10px;
    padding: 20px;
    box-sizing: border-box;
    min-width: 120px;
    background-color: #fff;
    box-shadow: 1px 2px 14px 1px #afafaf;
}

блоков может быть много, поэтому я не рассматриваю возможность поиска элементов по идентификатору. Я думаю, что будет лучше использовать getElementsByClassName .. Но помогите мне, пожалуйста, решить эту проблему :) Мой код:

var menuEl = document.getElementsByClassName("persons_contacts_details");
var dropcont = document.getElementsByClassName("drop_content");

for (var i = 0; i < menuEl.length; i++) {
    menuEl[i].addEventListener("click", function () {
        this.classList.toggle("show"); 
    }, false);
}

Заранее большое спасибо!!!

Автор: Kirill Krasnozhenov Источник Размещён: 08.11.2017 10:34

Ответы (1)


1 плюс

31691 Репутация автора

Решение

.toggle()является функцией jQuery и не применяется к .classList; это относится непосредственно к самому элементу. Чтобы переключить элемент с помощью необработанного JavaScript, самым простым решением было бы добавить onclickэлемент, который выполняет переключение, и использовать переменную if/elseдля обмена style.displayмежду noneи block.

Это можно увидеть в следующем рабочем примере:

var hidden = document.getElementsByClassName("hidden")[0];

function toggle() {
  if (hidden.style.display === "none") {
    hidden.style.display = "block";
  } else {
    hidden.style.display = "none";
  }
}
.hidden {
  display: none;
}
<div class="controller" onclick="toggle()">Toggle!</div>
<div class="hidden">I'm Hidden!</div>

Надеюсь это поможет! :)

Автор: Obsidian Age Размещён: 08.11.2017 10:47
Вопросы из категории :
32x32