需要菜单功能的HTML代码[关闭]答案

【问题标题】：Need HTML code for menu function [closed]需要菜单功能的HTML代码[关闭]
【发布时间】：2012-10-09 02:59:55
【问题描述】：

我找到了以下用于下拉菜单的 jquery 代码。 HTML 代码应该包含哪些内容才能使用它？

jQuery(document).ready(function(){

  jQuery("html").bind("click", function (e) {
    jQuery('.dropdown-toggle, a.menu').parent("li").removeClass("open");
  });

  jQuery(".dropdown-toggle, a.menu").click(function(e) {

    //  First look an see if a menu is open.  If it is, then just close it.
    if (jQuery(this).parent("li").hasClass("open")) {
        jQuery("ul").find('li').removeClass('open');
    }

    //  If menu was not open, then close any other menus that were open and just open the one.
    else {
        jQuery("ul").find('li').removeClass('open');
        jQuery(this).parent("li").addClass('open');
    }
    return false;
  });

});

【问题讨论】：

发布您到目前为止尝试过的内容。
这是为使用一组特定的 HTML 而编写的。你确定你得到这段代码的地方也没有 HTML 吗？
你在哪里找到的代码？您可能会在那里找到有关 HTML 的信息。
@FelixKling 这似乎是 twitter 引导代码。
@Praveen：我在这里没有看到任何特定于 Bootstrap 的内容...如果是，您不必设置任何 JavaScript，因为 data-toggle="dropdown" 会处理它。或者你会使用$('.dropdown-toggle').dropdown()...但是为什么要使用这个自定义代码？

标签： javascript jquery html drop-down-menu menu

【解决方案1】：

你需要这个 HTML：

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

或者，另一种方法：

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

在<UL>里面，你需要这样给：

<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a href="#">Separated link</a></li>
</ul>

如果要给分隔符，可以这样给：

<li class="divider"></li>

如果你想通过 JavaScript 调用它，你可以使用这个代码：

$('.dropdown-toggle').dropdown()

它会这样显示：

它是Twitter Bootstrap 的 JavaScript DropDown 菜单插件。您可以通过here了解更多。

【讨论】：

【解决方案2】：

您应该为您的特定情况创建自己的 HTML 和 js 代码，而不仅仅是使用 jquery 代码并猜测标记应该是什么。网上有很多教程：http://www.google.com/search?q=tuto+menu+jquery&aq=0&oq=tuto+menu+jquery

【讨论】：