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

回答

相关问题