<li className={styles.link + " " + styles.hideOnMobile}>
<div className={styles.dropdownMenu}>
<button className={styles.dropbtn}>Product</button>
<div className={styles.dropdownContent}>
<a
href="#"
onClick={this._trackClick.bind(this, "header")}
>
Link 1
</a>
<a
href="#"
onClick={this._trackClick.bind(this, "header")}
>
Link 2
</a>
</div>
</div>
</li>
.dropdownMenu {
position: relative;
display: inline-block;
}
.dropbtn {
padding: 14px 16px;
font-size: 16px;
border: none;
outline: none;
margin: 0;
&:hover{
background-color: $color-active-dark;
cursor: pointer;
}
}
.dropdownContent {
display: none;
position: absolute;
background-color: $color-active-dark;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
&:hover {
display: block;
cursor: pointer;
}
a {
float: none;
text-align: left;
padding: 12px 16px;
text-decoration: none;
display: block;
&:hover{
background-color: $color-active-dark;
cursor: pointer;
}
}
}
这是我的代码,目前,当我将鼠标悬停在上面时,它似乎并没有将显示更改为阻止,并且我不确定为什么。假设在顶部导航栏上有一个下拉菜单,当我将鼠标悬停时,链接1和链接2应该下拉,但是现在当我将鼠标悬停时,产品按钮会更改颜色。我在前端还很新,所以可以提供任何帮助。
答案 0 :(得分:1)
在CSS中添加额外的一行(额外的选择器)以在悬停时打开子菜单。在普通CSS中:
.dropdownContent:hover,
.dropbtn:hover + div {
display: block;
cursor: pointer;
}
您要求悬停触发器的下拉菜单。这不是触摸屏的“切换”机制,因为必须使用Javascript完成。
更新
您的另一个问题:如何切换(单击时打开/关闭)下拉菜单?
<script>
var Buttons = document.querySelectorAll(".dropbtn");
for (var i = 0; i < Buttons.length; i++) {
Buttons[i].addEventListener("click", function(event) {
var Divs = document.querySelectorAll(".dropdownContent");
var Shown = (this.nextElementSibling.classList.contains("show"));
for (var j = 0; j < Divs.length; j++) Divs[j].classList.remove("show");
if (Shown) this.nextElementSibling.classList.remove("show");
else this.nextElementSibling.classList.add("show");
});
}
</script>
在当前导航CSS的末尾加上以下额外的CSS
.dropdownContent {
display: none;
}
.dropdownContent.show {
display: block;
}
如果您的导航中包含多个<li class="link hideOnMobile">
项目,则该Javascript一次只能打开一个下拉列表。