-4

ドロップダウンメニューの次のjqueryコードを見つけました。HTMLコードを操作するには、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;
  });

});
4

2 に答える 2

0

この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()

そしてそれはこのように表示されます：

スクリーンショット

これは、TwitterBootstrapのJavaScriptDropDownメニュープラグインです。あなたはここでそれについてもっと知ることができます。

于 2012-10-18T15:35:52.660 に答える
0

jqueryコードを使用してマークアップを推測するだけでなく、特定の状況に合わせて独自のHTMLおよびjsコードを作成する必要があります。ウェブ上にはたくさんのチュートリアルがあります：http ：//www.google.com/search？q = tuto + menu + jquery＆aq = 0＆oq = tuto + menu + jquery

于 2012-10-18T15:38:27.050 に答える