Javascript DropDown菜单

时间:2009-08-29 15:28:19

标签: javascript

我希望实现这样的菜单

http://www.fogcreek.com/FogBugz/learnmore.html(左手边)

是否有人可以重新启动jquery或其他任何与上述网站相同的JavaScript库的插件?

4 个答案:

答案 0 :(得分:1)

jQuery Accordion 就是这样做的。

您可以使用此代码(来自jQuery Accordion页面)进行试用:

目:

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
});
</script>

体:

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>Mauris mauris ante</div>
    <h3><a href="#">Section 2</a></h3>
    <div>Sed non urna</div>
    <h3><a href="#">Section 3</a></h3>
    <div>Nam enim risus </div>
    <h3><a href="#">Section 4</a></h3>
    <div>Cras dictum</div>
</div>

答案 1 :(得分:1)

使用jQuery,我使用了这个脚本:

$(document).ready(function() {
    $(".nav > li > a").click(function() {
        $("ul", $(this).parent()).slideToggle("normal");
        return false;
    });
    $(".nav ul").hide(); // Hide all on load. Done here rather than in CSS so users
    // see the menu if they have javascript disabled.
});

菜单在HTML中标记为:

<ul class="nav">
     <li><a href="#">Header</a></li>
     <li>
          <ul>
              <li>Sub list Items</li>
              <!-- More -->
          </ul>
     </li>
 </ul>
每个可展开部分

答案 2 :(得分:0)

答案 3 :(得分:0)

我曾尝试使用jquery插件,但这并不符合我的要求。

但是,我可以通过从其他网站复制JS和CSS来使其工作:

http://jstock.sourceforge.net/features.html