Question

我有一个下拉菜单，当悬停在工作上时，我添加了一些javascript，可以在点击时打开和关闭css类.show菜单，并删除移动设备的悬停css。我的问题是点击时菜单没有显示。我可以在开发工具中看到css类被删除和添加，所以javascript工作正常。所以它似乎是一个CSS问题。但是，我没有看到任何可能导致此问题的css冲突。有谁知道这里的问题是什么？-thanks

我在jsfiddle中添加了整个css表，因为我明显遗漏了一些东西 https://jsfiddle.net/kmut5xtu/

        <nav>
             <ul class="main-nav">  
                 <li class="main-nav-item current-page"><a href="index.html">Home</a></li>
                 <li class="main-nav-item"><a href="about.html">About</a>
                </li>
                <li class="main-nav-item characters">
                    <span>Characters</span>
                    <ul class="drop-menu">
                        <li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
                        <li><a href="characters.html%20#ethan-clarke">Ethan Clarke</a></li>          
                        <li><a href="characters.html%20#serena-kiriaga">Serena Kiriaga</a></li>
                        <li><a href="characters.html%20#marcus-flynn">Marcus Flynn</a></li>
                        <li><a href="characters.html%20#emily-ashdown">Emily Ashdown</a></li>
                        <li><a href="characters.html%20#miles-west">Director Miles West</a></li>
                    </ul>
                </li>
                 <li class="main-nav-item"><a href="auther.html">Author</a></li>
             </ul>
        </nav>


    !function app(){

        !function AddMenuClickHandler(){
                let charTab= document.querySelector(".characters");
                let toggle= 1;

                charTab.addEventListener("click",function(){
                    let dropMenu=document.querySelector(".drop-menu");
                    if(toggle===1){
                        dropMenu.classList.add("show-menu");
                        toggle=0;
                    }
                    else if(toggle===0){
                        dropMenu.classList.remove("show-menu");
                        toggle=1;
                    }
                })
            }()
    }()

Answer 1

下面的CSS是问题：

.characters:hover {
            position: relative;
            border-radius: 8px 8px 0 0;
            }
    .characters:hover .drop-menu{
             visibility: visible;
             opacity:1;
        }

从这些CSS中删除悬停，你会很好。

Answer 2

关闭，你需要告诉你的HTML你正在使用JS。您可以使用脚本标记执行此操作：

CLLocationCoordinate2D

虽然我个人不使用JS来禁用手机上的可点击菜单，但有一种非常简单的方法可以让它们点击BootStrap uses，如果你使用BootStrap，它会让你轻松修改东西用于移动视图。

为什么这个可点击的下拉菜单不显示？

2 个答案: