jQuery下拉菜单不起作用

Question

我正在开发一个web应用程序，并把jQuery菜单，我把这个网站上的菜单的基地https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/Ø例5，只有下拉菜单不起作用下拉项不是通过点击触发输入/注册，菜单项已经出现，而不是点击进入/注册

错误菜单

<div id="dd" class="wrapper-dropdown-5" tabindex="1"> 
    <i class="fa fa-user"></i> Entre/Cadastre-se<span class="caret"></span> 
    <ul class="dropdown"> 
    <li class="conteudo_drop"> 
     <a href="#"><i class="fa fa-laptop"></i> Meus Pedidos</a> 
    </li> 
    <li class="conteudo_drop"> 
     <a href="#"><i class="fa fa-gear"></i> Meus Dados</a> 
    </li> 
    <li class="conteudo_drop"> 
     <a href="#"><i class="fa fa-group"></i> Fale Conosco</a> 
    </li> 
    <li> 
     <a href="#"><button type="button" onclick="" class="btn_entrar" >Entrar</button> </a> 
    </li> 
    <li class="conteudo_drop"> 
     <a href="cadastro.jsp"> Cliente novo? Cadastre-se</a> 
    </li> 
    </ul> 
</div> 

CSS

时出现

.wrapper-dropdown-5.active { 
    border-radius: 5px 5px 0 0; 
    background: #4cbeff; 
    box-shadow: none; 
    border-bottom: none; 
    color: white; 
} 

.wrapper-dropdown-5.active:after { 
    border-color: #82d1ff transparent; 
} 

.wrapper-dropdown-5.active .dropdown { 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
    max-height: 400px; 
} 

.wrapper-dropdown-5 .dropdown li { 
    padding: 0 10px ; 
} 

.wrapper-dropdown-5 .dropdown li a { 
    display: block; 
    text-decoration: none; 
    color: #333; 
    padding: 10px 0; 
    transition: all 0.3s ease-out; 
    border-bottom: 1px solid #e6e8ea; 
} 

.wrapper-dropdown-5 .dropdown li:last-of-type a { 
    border: none; 
} 

.wrapper-dropdown-5 .dropdown li i { 
    margin-right: 5px; 
    color: inherit; 
    vertical-align: middle; 
} 

/* Hover state */ 

.wrapper-dropdown-5 .dropdown li:hover a { 
    color: #57a9d9; 
} 


    /* Active state */ 

.wrapper-dropdown-5.active { 
    border-radius: 5px 5px 0 0; 
    background: #4cbeff; 
    box-shadow: none; 
    border-bottom: none; 
    color: white; 
} 

.wrapper-dropdown-5.active:after { 
    border-color: #82d1ff transparent; 
} 

.wrapper-dropdown-5.active .dropdown { 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
    max-height: 400px; 
} 

.conteudo_drop{ 
    color:#00008B !important; 
} 

.conteudo_drop a:hover{ 
    color: #A9A9A9 !important; 
    text-decoration: none; 
    font-size: 13pt; 
    background-color: white !important; 
} 

Answer 1

试试这个：

#dd{ 
    display:none; 
} 

button.js：

function myFunction() { 
    document.getElementById("dd").classList.toggle("show"); 
} 

因为，我不能完全理解这个问题，我所提供的解决方案的一部分。请参阅：page