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

Question

我想在单击切换时将 css 属性 (z-index) 更改为导航栏中的徽标。比我需要在关闭该切换开关时将属性改回来。这可能吗？

我的切换有 class "ubermenu-responsive-toggle-main" 我的徽标有 class "header-logo" 打开切换有一个 class "ubermenu-responsive-toggle-open"

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")=="value1"?"value2":"value1");

Answer 2

将您的 z-index 放入 css 文件中的 class -

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 class 中。只是比较容易对付因为 classlist 属性存在于 DOM 个节点中。

希望这对您有所帮助。

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

Change a css property of a logo when toggle is clicked

javascript

css

toggle