Javascript 在以下场景中,如何在主菜单悬停处显示子菜单项?

Javascript 在以下场景中,如何在主菜单悬停处显示子菜单项?,javascript,jquery,html,css,menu,Javascript,Jquery,Html,Css,Menu,我已经为menubar卸下了bootstrap3 它工作正常,只要点击主菜单就可以显示子菜单项。 但是我想要的是,在主菜单的上,应该显示子菜单项的hover。 以下是onclick工作菜单栏的代码: <div class="jumbotron"> <div class="container"> <p class="lead">Grid Example</p> <!-- Grid demo navba

我已经为menubar卸下了bootstrap3

它工作正常,只要点击主菜单就可以显示子菜单项。 但是我想要的是,在主菜单的
上,应该显示子菜单项的hover
。 以下是onclick工作菜单栏的代码:

<div class="jumbotron">
      <div class="container">
        <p class="lead">Grid Example</p>
        <!-- Grid demo navbar -->
        <div class="navbar navbar-default yamm">
          <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>
          </div>
          <div id="navbar-collapse-grid" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Grid<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-12">.col-sm-12</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6">.col-sm-6</div>
                      <div class="col-sm-6">.col-sm-6</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-4">.col-sm-4</div>
                      <div class="col-sm-4">.col-sm-4</div>
                      <div class="col-sm-4">.col-sm-4</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-3">.col-sm-3</div>
                      <div class="col-sm-3">.col-sm-3</div>
                      <div class="col-sm-3">.col-sm-3</div>
                      <div class="col-sm-3">.col-sm-3</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--
              <With>Offsets </With>
              -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Offset<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-4">4</div>
                      <div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
                      <div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--
              <Aside>Menu </Aside>
              -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Aside<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-3"><br>
                        <h3>3</h3><br>
                      </div>
                      <div class="col-sm-9"><br>
                        <h3>9</h3><br>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--
              <Nesting>Menu </Nesting>
              -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Nesting<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-12">12</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-12">12
                        <div class="row">
                          <div class="col-sm-4">4</div>
                          <div class="col-sm-4">4</div>
                          <div class="col-sm-4">4</div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

网格示例

    • col-sm-12 .col-sm-6 .col-sm-6 .col-sm-4 .col-sm-4 .col-sm-4 .col-sm-3 .col-sm-3 .col-sm-3 .col-sm-3 .col-sm-2 .col-sm-2 .col-sm-2 .col-sm-2 .col-sm-2 .col-sm-2 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1 .col-sm-1
    • 4. 4偏移量4 3偏移量3 3偏移量3 6偏移量6
    • 12 12 4. 4. 4.
Javascript如下所示:

<script>
      $(function() {
        window.prettyPrint && prettyPrint()
        $(document).on('click', '.yamm .dropdown-menu', function(e) {
          e.stopPropagation()
        })
      })
    </script>

$(函数(){
window.prettyPrint&&prettyPrint()
$(文档).on('单击','.yamm.下拉菜单',函数(e){
e、 停止传播()
})
})
谁能帮我解决这个问题。 提前感谢。

试试这个:

 <script>
         $("#nav li").hover(
        function(){
            $(this).children('ul').hide();
            $(this).children('ul').slideDown('slow');
        },
        function () {
            $('ul', this).slideUp('slow');            
        });
 </script>

$(“#nav li”)。悬停(
函数(){
$(this.children('ul').hide();
$(this.children('ul')。slideDown('slow');
},
函数(){
$('ul',this.slideUp('slow');
});
把你的头发做成这样


当你发布HTML和代码时,你最好设置一个JSFIDLE来保存其他人:从这个开始,请添加你的基本样式:)@TrueBlueAussie:Ok。。。因为我是新来的,所以我不知道。发布你的风格……@Praveen:有3个风格文件