怎么只用Jquery实现菜单的收缩，点一下把子菜单隐藏，再点一下把子菜单展开，就像QQ好友分类那样，3Q！

JavaScript020

怎么只用Jquery实现菜单的收缩，点一下把子菜单隐藏，再点一下把子菜单展开，就像QQ好友分类那样，3Q！,第1张

点击展开或隐藏菜单，最好在菜单前加一个图标按钮，美观又方便。

如果想像你这样实现，最好在每一个ul和li加上ID（这个ID必须是有规律的，比如父ID为1_1,子ID1_1_1...），用链接的点击事件根据ID获取父菜单和子菜单实现改变ul、li的display样式就可以实现展开或隐藏。

<style>

#box .hid{display:none}

#box .show{display:block}

</style>

<body>

<ul id="box">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

</ul>

<p id="tog">展开</p>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script>

var len=$("#box li").length

function int(){

for(i=8i<leni++){

$("#box li").eq(i).addClass("hid")

}

}

$("#tog").click(function(){

var t=$(this).text()

if(t=="展开"){

$("#box .hid").addClass("show")

$(this).text("收缩")

}else{

$("#box .hid").removeClass("show")

$(this).text("展开")

}

})

int()//初始化隐藏多余标签

</script>

最好是用样式来控制显示隐藏show和hide，从jquery对dom的操作速度方便来考虑的话。

里面标签随便你写什么 只要标签外部有个div 的ID 是box就可以

这个是因为在flexy-menu.js中对窗口缩放进行了控制。当窗口缩放的后的宽度小于768时，菜单就会被隐藏。这里我把这个功能给去除了，缩放时菜单将不再会被隐藏了。

附件是修改好了的文件，可以直接使用。