如何使用 jquery 改进这个侧边菜单示例？

Posted 2023-02-16

【中文标题】如何使用 jquery 改进这个侧边菜单示例？

【英文标题】：how improve this sample of side menu with jquery?

【发布时间】：2012-01-19 07:22:16

【问题描述】：

我有这个 html 代码的简单侧边菜单：

<div id="menu">
                    <div>
                        Menu Title
                    </div>
                    <ul class="menu">
                        <li>
                            <span>
                                first item
                            </span>
                            <ul>
                                <li>
                                    sub item
                                </li>
                                <li>
                                    sub item
                                </li>
                                <li>
                                    sub item
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span>
                                second item
                            </span>
                            <ul>
                                <li>sub menu</li>
                                <li>sub menu</li>
                            </ul>
                        </li>
                        <li>
                            <span>
                                third item
                            </span>
                            <ul>
                                <li>
                                    sub menu
                                </li>
                                <li>
                                    sub menu
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

而css是：

#menu
text-align:center;
font-size:13px;
font-family:tahoma;
color:#0000AA;
padding:2px 0;
#menu div
color:#0000AA;
#menu ul
text-align:right;
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;
#menu ul li
display:block;
margin: 3px 2px;
cursor:hand;
cursor:pointer;
#menu ul li span
width:100%;
display:block;
background-color:#DDDDFF;
#menu ul li span:hover
background-color:#9999EE;
#menu ul li ul
display:none;
#menu ul li ul li
background-color:#EEEEEE;
margin:2px;
display: block;
#menu ul li ul li:hover
background-color:#FFFFFF;
.submenu
background-color: #CCCCFF;  

jquery 代码是：

    $(window).load(function()
  $(".submenu").children(this).slideUp("slow");
);
$(document).ready(function()
    $('ul.menu li span').click(function()
    $("ul.menu li").find('ul').slideUp('fast');
    $(this).parent(this).find('ul').slideDown('fast');
    );
);

我的盘点菜单位于http://jsfiddle.net/parseha/NkuG5/3/ 这个问题是：当点击第一项时，子菜单向上滑动然后向下滑动，我不想这样运行。 请原谅我的这篇文章和我在内容上的错误。 谢谢。

【参考方案1】：

使用“兄弟”选择器，slideToggle() 将根据其当前状态显示或隐藏 DOM。

$(window).load(function()
  $(".submenu").children(this).slideUp("slow");
);
$(document).ready(function()
    $('ul.menu li span').click(function()
        $(this).siblings('ul').slideToggle('fast');

    );
);

【讨论】：

感谢 Kyle Macey，我以前使用过这个模型，但现在我需要 xbonez，

【参考方案2】：

诀窍是跟踪展开了哪个菜单，并根据其状态（展开或折叠）确定要采取的操作（向上滑动或向下滑动）。

您可以通过在菜单项展开时向菜单项添加一个类来实现此目的，并在其折叠时删除该类。该类的存在将指示菜单是展开还是折叠。

jQuery 代码：

$(window).load(function() 
    $(".submenu").children(this).slideUp("slow");
);
$(document).ready(function() 
    $('ul.menu li span').click(function() 
        if ($(this).hasClass('current'))
        
            $(this).removeClass('current');
            $("ul.menu li").find('ul').slideUp('fast');

        
        else
        
            $(this).addClass('current');
            $(this).parent(this).find('ul').slideDown('fast');            

        
    );
);

Demo