Изменение свойства css логотипа при нажатии на переключатель - PullRequest
Новая
       7

Изменение свойства css логотипа при нажатии на переключатель

0 голосов
/ 17 мая 2018

Я хочу изменить свойство css (z-index) на логотип в панели навигации, когда я нажимаю на переключатель. Чем мне нужно изменить это свойство обратно, когда этот переключатель закрыт. Возможно ли это?

У моего переключателя есть класс "ubermenu-responseive-toggle-main" Мой логотип имеет класс "header-logo" Открытый переключатель имеет класс «ubermenu-responseive-toggle-open»

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Поместите ваш z-index в класс в вашем css файле -

CSS 

.z-index-high {
    z-index: 999;
}

JS 

toggleBtn.addEventListener("click", () => {
    toggleBtn.classlist.toggle("ubermenu-responsive-toggle-open");
    if(toggleBtn.classlist.contains("ubermenu-responsive-toggle-open") {
        logo.classlist.add("z-index-high");
     } else logo.classlist.remove("z-index-high");
});

Не обязательно помещать свойство z-index в класс css. Просто легче иметь дело с из-за classlist свойств, присутствующих в узлах DOM.

Надеюсь, это поможет.

0 голосов
/ 17 мая 2018 
<!DOCTYPE html>
<html>
 <body>

<div id="demo" customAttribute="value1">this text toogles</div> 
<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
   elm=document.getElementById("demo");
  elm.setAttribute("customAttribute",elm.getAttribute("customAttribute")=="value1"?"value2":"value1");
}
</script>

<style>
[customAttribute=value2]{
visibility: visible; 
}

[customAttribute=value1]{
visibility: hidden;
}
</style>

</body>
</html>

Этот код представляет собой простой переключатель, который будет скрывать, а затем отображать текст при нажатии кнопки. Ключ это линия elm.setAttribute ( "CustomAttribute", elm.getAttribute ( "CustomAttribute") == "значение1" "значение2": "value1");

...