时间戳

首页 > 解决方案 > 悬停时下拉菜单不下拉

javascript - 悬停时下拉菜单不下拉

问题描述

                            <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 应该是下拉菜单，但是现在当我悬停时，产品按钮会改变颜色。我在前端很新，所以任何帮助表示赞赏。

标签： javascripthtmlcssreactjs

解决方案

在您的 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;
}

当然，如果您有一个包含多个项目的导航，则此 Javascript 一次只会打开一个下拉菜单<li class="link hideOnMobile">。

推荐阅读