Question

我已经制作了一些列表，我认为在jQuery和我的菜单切换点击事件时，我迷失了它们。

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

时

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

点击Menu2标签时，它甚至无法正常工作。我们的想法是删除这个＆＃34; hover＆＃34;在menu2上的东西，让它只适用于＆＃34;点击＆＃34;。我该如何解决？

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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

用css的jQuery下拉菜单

3 个答案: