需要用于菜单功能的HTML代码

Question

我在下拉菜单中找到了以下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;
  });

});

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

Answer 2

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