Question

大家好，我一直在做很多研究。

无法找到解决方案。

我试图在鼠标移出时保持菜单子导航处于活动状态。

基本上与引导程序菜单完全相同。

        <div id="nav_wrap">
        <div id="nav">
            <ul>
                <li><a href="#">parent</a>

                    <ul>
                        <li><a href="#">child</a>
                        </li>
                        <li><a href="#">child</a>
                        </li>
                        <li><a href="#">child</a>
                        </li>
                        <li><a href="#">child</a>
                        </li>
                        <li><a href="#">child</a>
                        </li>
                        <li class="last_item"><a class="last_item" href="#">child</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">parent</a>

                    <ul>
                        <li><a href="#">child</a>
                        </li>
                        <li><a href="#">child</a>
                        </li>
                        <li><a href="#">child</a>
                        </li>
                        <li><a class="last_item" href="#">child/a></li>
                        </ul>
                        </li>
                        <li><a href="#">parent</a>
                        </li>
                        <li style="border-right:1px solid #171717"><a a href="#">parent</a>
                        </li>
                    </ul>
        </div>
            </div>


        #nav_wrap {
            background: #000;
            height: 60px
        }

        #nav {
            float: right;
        }
        #nav ul {
            list-style-type: none;
        }
        #nav li a {
            font-size: 0.9em;
            color: #FFF;
            display: block;
            padding: 0 26px;
            text-decoration: none;

            font-family: opensans;
            text-transform: uppercase;
        }
        #nav li a:hover {
            background: #1B1A1A;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            -ms-transition: all 0.2s ease;
            -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        #nav ul li {
            float: left;
            position: relative;
        }
        #nav ul li a {
            text-align: center;
            padding: 0 26px;
            display: block;
            text-decoration: none;
            color: #FFF;
            line-height: 60px;
        }
        #nav ul li ul {
            display: none;
        }
        #nav ul li:hover ul {
            display: block;
            position: absolute;
        }
        #nav ul li:hover ul li a {
            background: none repeat scroll 0 0 #232323;
            border-left: medium none;
            color: #FFFFFF;
            display: block;
            font-family: opensans;
            font-size: 0.8em;
            line-height: 35px;
            text-align: left;
            width: 190px;
            padding: 0 15px;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            -ms-transition: all 0.2s ease;
            -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
            text-transform:capitalize;
        }
        #nav ul li:hover ul li a:hover {
            background: #069;
            color: #fff;
        }
        #nav ul li ul li {
            border-top:1px solid #2A2A2A
        }
        .last_item {
            border-radius: 0 0 3px 3px;
        }
        .home {
            vertical-align: middle;
            padding-bottom: 5px;
        }


          $("#nav ul li ul li").hide();

          $("#nav ul li").click(function(){
            $("#nav ul li ul li").toggle();



          }); 

          $("#nav").mouseout(function(){
            $("#nav ul li ul li").show();



          });

我觉得问题真的很小。我只是没有得到它。

Answer 1

不使用CSS :hover来显示子菜单，而是使用jQuery click事件：

$("#nav > ul > li").on('click', function(){
    $(this).toggleClass('active');
});

单击列表项可切换.active类，该类控制子菜单的可见性：

#nav > ul > li > ul {
    display: none;
}
#nav > ul > li.active > ul {
    display: block;
}

以下是您的小提琴的修改版本：http://jsfiddle.net/2mRwb/3/

Answer 2

我改变了你的jquery和你的css。风格需要一些改进，但行为是你想要的。

 $("#nav ul li ul li").hide();

  $("#nav ul li").click(function(){
    $(this).find('ul').toggle()
  }); 

  $("#nav").mouseout(function(){
    $("#nav ul li ul li").show();

  });

Jsfiddle

尝试使用jquery进行子菜单切换

2 个答案: