2017-10-21 25 views
0

Webアプリケーションを開発してjQueryメニューを配置しました。このサイトのメニューのベースを取ったhttps://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/例5、ドロップダウンメニューはドロップダウンメニューが機能しません上でクリックすることによって起動メニュー項目がすでに表示され、サインアップではなく、登録/入力jQueryのドロップダウンメニューが機能しません

エラーメニュー

enter image description here

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

答えて

0

これを試してみてください:

#dd{ 
    display:none; 
} 

button.js:私は問題を完全に理解することができませんでし

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

、以来、私は解決策の一部を提供しています。これを参照してください:page

+0

、ドロップダウンメニューの表示がありません:なし、しかしdocument.getElementById( "dd")の機能。classList.toggle( "show");仕事をしない – Felipe

関連する問題