如何在此菜单栏上应用手风琴 jquery 效果？

Posted 2023-02-16

【中文标题】如何在此菜单栏上应用手风琴 jquery 效果？

【英文标题】：How to apply accordion jquery effect on this menu bar?

【发布时间】：2012-06-14 04:51:05

【问题描述】：

我想对这段代码的 sn-p 应用手风琴效果，但我是 JQuery 的初学者。有人可以帮我吗？

<div id="left_menu">
            <ul id="main_menu" class="main_menu">
                <li class="limenu" ><a href="dashboard.html"><span class="ico gray shadow home" ></span><b>Dashboard</b></a></li>
                <li class="limenu select" ><a href="#" ><span class="ico gray shadow window"></span><b>Form elements</b></a>
                    <ul>
                        <li ><a href="form.html"> basic form </a></li>
                        <li ><a href="vform.html"> validation </a></li>
                        <li ><a href="wizard.html"> wizard </a></li>
                    </ul>
                </li>
                <li class="limenu" ><a href="#"><span class="ico gray  dimensions" ></span><b>Sample pages</b></a>
                    <ul>
                        <li ><a href="profile.html"> Profile setting </a></li>
                        <li ><a href="conversation.html"> conversation</a></li>
                        <li ><a href="imagesEditor.html"> Images Editor </a></li>
                    </ul>
                </li>
                <li class="limenu" ><a href="table.html"><span class="ico gray shadow  spreadsheet"></span><b>Tables</b> </a></li>
                <li class="limenu" ><a href="gallery.html"><span class="ico gray shadow pictures_folder"></span><b>Gallery </b></a></li>
                <li class="limenu" ><a href="#"><span class="ico gray shadow stats_lines"></span><b>Graph and Charts</b> </a>
                    <ul>
                        <li><a href="modalchartLive.html" class="pop_box">live chart </a></li>
                        <li><a href="chart.html">all chart</a></li>
                    </ul>
                </li>
                <li class="limenu" ><a href="filemanager.html"><span class="ico gray shadow  file"></span><b>File manager </b></a></li>
                <li class="limenu" ><a href="calendar.html"><span class="ico gray shadow calendar"></span><b>Calendar </b></a></li>
                <li class="limenu" ><a href="typography.html"><span class="ico gray  shadow paragraph_align_left"></span><b>Typography</b></a></li>
                <li class="limenu" ><a href="inelement.html"><span class="ico gray shadow abacus"></span><b>Interface elements </b></a></li>
                <li class="limenu" ><a href="map.html"><span class="ico gray shadow  location"></span><b>Map location </b></a></li>
                <li class="limenu" ><a href="icon.html"><span class="ico gray  shadow satellite"></span><b>Icon and Button </b></a></li>
                <li class="limenu" ><a href="404.html"><span class="ico gray  shadow firewall"></span><b>Error Pages</b></a></li>

            </ul>
        </div>

【问题讨论】：

你可以阅读 jquery ui accordion 文档。

查看官方演示和文档：jqueryui.com/demos/accordion

【参考方案1】：

你可以像这样使用 jQuery UI：http://jsfiddle.net/J5jg4/

【参考方案2】：

您应该真正符合 API 中列出的 HTML 格式：

JqueryUI Accordion

这意味着一个标题标签来命名这些部分，而 divs 在标题之后直接划分手风琴部分。

但坦率地说，我不确定您在这里寻找的是手风琴。如果我了解您要完成的工作，您真的不想要这样一个简单的下拉菜单吗？

jQuery Dropdown Menu Plugin