jQuery下拉菜單與css

我做了一個列表，我想我迷失了他們，當涉及到jQuery，並使我的菜單切換點擊事件。jQuery下拉菜單與css

的問題是在菜單中。當鼠標懸停在元素上時，它會顯示，當我點擊它時 - 隱藏。但是當我從CSS刪除

ol > li:hover > ul 
{ 
    display: block; 
}

它甚至不會在單擊Menu2選項卡時工作。這個想法是在菜單2上刪除這個「懸停」的東西，並使其僅適用於「點擊」。我該如何解決它？

來源

2015-07-02 nehel

不回答工作？ –

是的，謝謝你的迴應，我很感激:) – nehel

您正試圖切換列表元素而不是列表本身。只需使用以下JavaScript：

$('ol li.submenuone').click(function() { 
    $('ol li.submenuone ul').toggle(); 
});

並從上面刪除您的CSS。

演示：JSFiddle

來源

2015-07-02 07:55:44 KittMedia

哦，我明白了，儘管我有一個問題，因爲它從一開始就存在問題。要停止轉動菜單，我必須使用切換（e）e.preventDefault？ – nehel

我不清楚你想要防止什麼。 – KittMedia

啊，沒關係，因爲我想讓這個子菜單進入另一個子菜單，但是，然後，父子菜單仍然會「打開」。我的壞在那裏，謝謝你的回答:) – nehel

使用jQuery而不是CSS ..

$('ol > li.submenuone').click(function() { 
    $('ol > li.submenuone ul').slideToggle(); 
    });

來源

2015-07-02 07:58:26

感謝您的時間，@KittMedia向我解釋了我做錯了什麼:)！ – nehel

使用jQuery，最初的子菜單應該被隱藏。然後sho/hide，使用jQuery切換。也改變了CSS。

$('ol li.submenuone').click(function() { 
 
    //alert("hello"); 
 
    $('ol li.submenuone ul').toggle(); 
 
    });

.nav 
 
{ 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    background-color: red; 
 
    text-align: center; 
 
    box-shadow: 0px -1px 40px black; 
 
    position: relative; 
 
    z-index: 9999; 
 
} 
 

 
ol 
 
{ 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    font-size: 18px; 
 
    height: 35px; 
 
    line-height: 200%; 
 
    display: inline-block; 
 
    letter-spacing: 1px; 
 
} 
 

 
ol a 
 
{ 
 
    color: white; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
ol > li 
 
{ 
 
    float: left; 
 
    width: 170px; 
 
    height: 40px; 
 
    border-right: 1px dashed #800517; 
 
    transition-property: background; 
 
\t transition-duration: .4s; 
 
} 
 

 
ol > li:first-child 
 
{ 
 
border-left: 1px dashed #800517; 
 
} 
 

 
ol > li:hover 
 
{ 
 
    background-color: #800517; 
 
} 
 

 
ol > li > ul 
 
{ 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 40px; 
 
    width: 100px; 
 
    display: none; 
 
} 
 

 
ol > li> ul 
 
{ 
 
    display: none; 
 
} 
 

 
ol > li > ul > li 
 
{ 
 
    padding: 2px; 
 
    background-color: red; 
 
    position: relative; 
 
    z-index: 9999; 
 
    border-top: 1px dashed #800517; 
 
} 
 
ol > li > ul > li:first-child 
 
{ 
 
    border-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="nav"> 
 
     <ol> 
 
      <li><a href="#">menu1</a></li> 
 
      <li class="submenuone"><a href="#">menu2</a> 
 
       <ul> 
 
        <li class="submenutwo"><a href="#">sub1</a></li> 
 
         <ul> 
 
          <li class="submenuthree"><a href="#">sub1</a></li> 
 
          <li class="submenuthree"><a href="#">sub2</a></li> 
 
          <li class="submenuthree"><a href="#">sub3</a></li> 
 
         </ul> 
 
        <li class="submenutwo"><a href="#">sub2</a></li> 
 
        <li class="submenutwo"><a href="#">sub3</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">menu3</a></li>  
 
     </ol> 
 
    </div>

來源

2015-07-02 08:09:30

jQuery下拉菜單與css

回答

相關問題