jQuery下拉菜單不起作用

我正在開發一個web應用程序，並把jQuery菜單，我把這個網站上的菜單的基地https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/Ø例5，只有下拉菜單不起作用下拉項不是通過點擊觸發輸入/註冊，菜單項已經出現，而不是點擊進入/註冊jQuery下拉菜單不起作用

錯誤菜單

<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; 
}

來源

2017-10-21 Felipe

試試這個：

#dd{ 
    display:none; 
}

button.js：

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

因爲，我不能完全理解這個問題，我所提供的解決方案的一部分。請參閱：page

來源

2017-10-21 18:24:44 uttejh

，下拉菜單便宜，顯示：無，但帶有document.getElementById（「dd」）的函數。classList.toggle（「show」）;不工作 – Felipe

jQuery下拉菜單不起作用

回答

相關問題