草庐IT

javascript - 使 Bootstrap 的 YAMM 在悬停时打开

coder 2024-07-14 原文

我正在使用 YAMM 为 Bootstrap 创建一个大型菜单,但我不知道如何使菜单在鼠标悬停/悬停时出现。目前它仅在点击时出现。

github demo

jsFiddle

<div class="container">

  <div class="navbar yamm">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#nav1">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="brand" href="#"> Yamm Megamenu </a>
        <div class="nav-collapse collapse" id="nav1">
          <ul class="nav">
            <!-- Classic list -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> List <b class="caret"></b> </a>
              <ul class="dropdown-menu">
                <li>
                  <!-- Content container to add padding -->
                  <div class="yamm-content">
                    <ul class="span2 unstyled">
                      <li><p><strong>Section Title</strong></p></li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                    </ul>
                    <ul class="span2 unstyled">
                      <li><p><strong>Links Title</strong></p></li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                      </li>
                      <li>
                        <a href="#"> Link Item </a>
                    </ul>
                    <ul class="span2 unstyled">
                      <li><p><strong>Section Title</strong></p></li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                    </ul>
                    <ul class="span2 unstyled">
                      <li><p><strong>Section Title</strong></p></li>
                      <li>
                        List Item
                      </li>
                      <li>
                        List Item
                      </li>
                      <li>
                        <ul>
                          <li>
                            <a href="#"> Link Item </a>
                          </li>
                          <li>
                            <a href="#"> Link Item </a>
                          </li>
                          <li>
                            <a href="#"> Link Item </a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <!-- Accordion demo -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Accordion <b class="caret"></b> </a>
              <ul class="dropdown-menu">
                <li>
                  <div class="yamm-content">
                    <div class="row-fluid">
                      <div id="accordion2" class="accordion  span6">
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle collapsed"> Collapsible Group Item #1 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseOne" style="height: 0px;">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseTwo" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #2 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseTwo">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseThree" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #3 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseThree">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="accordion3" class="accordion  span6">
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseOne1" data-parent="#accordion3" data-toggle="collapse" class="accordion-toggle collapsed"> Collapsible Group Item #1 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseOne1" style="height: 0px;">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseTwo1" data-parent="#accordion3" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #2 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseTwo1">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                        <div class="accordion-group">
                          <div class="accordion-heading">
                            <a href="#collapseThree1" data-parent="#accordion3" data-toggle="collapse" class="accordion-toggle"> Collapsible Group Item #3 </a>
                          </div>
                          <div class="accordion-body collapse" id="collapseThree1">
                            <div class="accordion-inner">
                              Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
            <!-- Classic dropdown -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Classic <b class="caret"></b> </a><!-- Classic Dropdown -->
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li>
                  <a tabindex="-1" href="#"> Action </a>
                </li>
                <li>
                  <a tabindex="-1" href="#"> Another action </a>
                </li>
                <li>
                  <a tabindex="-1" href="#"> Something else here </a>
                </li>
                <li class="divider"></li>
                <li>
                  <a tabindex="-1" href="#"> Separated link </a>
                </li>
              </ul>
            </li>
            <!-- Pictures -->
            <li class="dropdown yamm-fullwidth">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Pictures <b class="caret"></b> </a>
              <ul class="dropdown-menu">
                <li>
                  <div class="yamm-content">
                    <!-- thumbnails needs a row-fluid to make span fluid -->
                    <div class="row-fluid">
                      <ul class="thumbnails">
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                        <li class="span2">
                          <a class="thumbnail" href="#"> <img alt="150x190" data-src="holder.js/150x90"> </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </li>

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

最佳答案

当特定的 li 悬停时,您需要制作 display: block

将其添加到您的 CSS 代码中

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

关于javascript - 使 Bootstrap 的 YAMM 在悬停时打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22458901/

有关javascript - 使 Bootstrap 的 YAMM 在悬停时打开的更多相关文章

  1. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  3. ruby - 如何通过 Rubocop 指示打开 & :read as argument to File. - 2

    我有这个代码File.open(file_name,'r'){|file|file.read}但是Rubocop发出警告:Offenses:Style/SymbolProc:Pass&:readasargumenttoopeninsteadofablock.你是怎么做到的? 最佳答案 我刚刚创建了一个名为“t.txt”的文件,其中包含“Hello,World\n”。我们可以按如下方式阅读。File.open('t.txt','r',&:read)#=>"Hello,World\n"顺便说一下,由于第二个参数的默认值是'r',所以这样

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 从 Rakefile 打开 Vim? - 2

    我正在为个人笔记创建一个日志应用程序,并且在我的Rakefile中包含以下内容:task:newdoentry_name="Entries/#{Time.now.to_s.gsub(/[-\:]+/,'.').gsub(/.0500+/,'')}.md"`touch#{entry_name}``echo"#$(date)">>#{entry_name}`end我想包括的最后一部分是Vim文本编辑器的打开,但我不知道如何打开它,就像我直接从bash终端调用它一样。我试过:vim#{entry_name}但不幸的是,我认为它们都将其作为后台进程打开。我一直在引用“6WaystoRunShe

  6. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3,而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点? 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  7. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑,但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序,我正在尝试编辑.gitignore文件,但在我的应用程序文件夹中找不到它。我在哪里可以找到它?我安装了Git。 最佳答案 .gitignore位于项目的root中,而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑,但在OSXMountainLion上找不到文件位

  8. ruby - 使用 File.open 从 ruby​​ 中的目录打开文件 - 2

    我是Ruby的新手,我正在尝试以如下方式打开文件:#!/usr/bin/envrubydata_file='~/path/to/file.txt'file=File.open(data_file,'r')但是我得到“没有这样的文件或目录”(该文件确实存在于该目录中)。如果我将该文件路径作为命令行参数,它会起作用,例如:#!/usr/bin/envrubyfile=File.open(ARGV[0],'r')然后从命令行运行,如:rubyscript.cgi~/path/to/file.txt关于如何让它以第一种方式工作的任何想法? 最佳答案

  9. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下,分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐