Question

我想在单击切换时将css属性（z-index）更改为导航栏中的徽标。当切换关闭时，我需要更改该属性。这可能吗？

我的切换课程有一个＆＃34; ubermenu-responsive-toggle-main＆＃34; 我的徽标有一个＆＃34;标题标识＆＃34; Open toggle有一个＆＃34; ubermenu-responsive-toggle-open＆＃34;

Answer 1

<!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”）;

Answer 2

将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类中并不是强制性的。它更容易处理因为DOM节点中存在classlist propoerty。

希望这有帮助。

单击切换时更改徽标的css属性

2 个答案: