用css的jQuery下拉菜单

Question

我已经制作了一些列表，我认为当涉及到jQuery并让我的菜单切换点击事件时，我迷失了它们。

这是我有的： http ： //jsfiddle.net/3rc63e3L/

问题出在菜单中。 当鼠标悬停在元素上时，它正在显示，当我点击它时 - 它隐藏了。 但是当我从CSS中删除时

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

单击Menu2选项卡时甚至不起作用。 我们的想法是在menu2上删除这个“悬停”的东西，并使其仅用于“点击”。 我该如何解决？

Answer 1

您正在尝试切换列表元素而不是列表本身。 只需使用以下JavaScript：

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

并从上面删除您的CSS。

演示： JSFiddle

Answer 2

使用jquery而不是css ..

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

Answer 3

使用jQuery，最初应该隐藏subMenu。 然后笑/隐藏，使用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; 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>