【Jquery不再是累赘】制作一个超级简单的伸缩菜单

1Next >

updatex	发表于：10-09-01 18:47 [取消收藏] [添加收藏] 楼主 [回复] #Top#
人气：1523 积分：1531 金币：32550	说明：所谓超级简单的伸缩菜单就是没什么装饰，纯粹实现了这种效果，点一级菜单，伸展开子级菜单，点击另一个一级菜单时，展开本菜单的子菜单，其他展开的子菜单收缩。本人表述能力不行，直接上代码吧。下面是CSS代码： * { margin: 0; padding: 0; list-style: none; } .leftMenu { float: left; width: 138px; overflow: hidden; margin-top: 20px; } .leftMenu dl dt, .leftMenu dl dt a { display: block; font-size: 14px; font-weight: bold; text-indent: 20px; line-height: 28px; } .leftMenu dl dd ul li, .leftMenu dl dd ul li a { display: block; float: left; width: 138px; font-size: 14px; text-indent: 20px; line-height: 28px; } 复制代码下面是：jquery代码 $(document).ready(function(){ $(".leftMenu dl dd").hide(); $(".leftMenu dl dt a").click(function(){ $(".leftMenu dl dd").hide(); $(this).parent().next().show(); }); }) 复制代码下面是html body里面的代码： <div class="leftMenu"> <dl> <dt><a href="javascript:void(0);">kingcms</a></dt> <dd> <ul> <li><a href="#">帮助</a></li> <li><a href="#">论坛</a></li> <li><a href="#">主站</a></li> </ul> </dd> <dt><a href="javascript:void(0);">视频</a></dt> <dd> <ul> <li><a href="#">分享视频</a></li> <li><a href="#">管理视频</a></li> </ul> </dd> <dt><a href="javascript:void(0);">博客</a></dt> <dd> <ul> <li><a href="">发布文章</a></li> <li><a href="">管理内容</a></li> </ul> </dd> </dl> </div> 复制代码暂时就写这么点吧。希望对大家有用。好名字容易娶媳妇？乌兰浩特论坛悦买网-专业导购网快剧网 - 电视剧分集剧情网站 Ta最近还发表过 [分享] 2025报到 (25-03-01) [分享] 我想再用Kingcms6.0做几个网站玩玩 (24-09-22) [分享] 最近做了一个用户登录短信验证（阿里云的） (24-09-18) [分享] 2024你好kingcms (24-05-17) [使用] kingcms+chatgpt 输入标题自动生成文章内容如何？ (23-11-24) 随机阅读 [建议] 建议编辑器里可使用KINGCMS标签 (17-01-18) [帮助] 【积分商城】详细配置文档 (16-11-11) [分享] 刚做的网站，戳进来看看 (16-08-01) [疑问] 企业版ASP 如何做搜索搜页模板？ (13-11-12) [错误] 后台生成内容页，老是多数来几个编号相同的。 (13-03-18)

updatex

发表于：10-09-01 18:47 [取消收藏] [添加收藏] 楼主 [回复] #Top#

人气：1523 积分：1531 金币：32550

说明：所谓超级简单的伸缩菜单就是没什么装饰，纯粹实现了这种效果，点一级菜单，伸展开子级菜单，点击另一个一级菜单时，展开本菜单的子菜单，其他展开的子菜单收缩。
本人表述能力不行，直接上代码吧。
下面是CSS代码：

* {
margin: 0;
padding: 0;
list-style: none;
}
.leftMenu {
float: left;
width: 138px;
overflow: hidden;
margin-top: 20px;
}
.leftMenu dl dt, .leftMenu dl dt a {
display: block;
font-size: 14px;
font-weight: bold;
text-indent: 20px;
line-height: 28px;
}
.leftMenu dl dd ul li, .leftMenu dl dd ul li a {
display: block;
float: left;
width: 138px;
font-size: 14px;
text-indent: 20px;
line-height: 28px;
}

复制代码

下面是：jquery代码

$(document).ready(function(){
$(".leftMenu dl dd").hide();
$(".leftMenu dl dt a").click(function(){
$(".leftMenu dl dd").hide();
$(this).parent().next().show();
});
})

复制代码

下面是html body里面的代码：

<div class="leftMenu">
<dl>
<dt><a href="javascript:void(0);">kingcms</a></dt>
<dd>
<ul>
<li><a href="#">帮助</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">主站</a></li>
</ul>
</dd>
<dt><a href="javascript:void(0);">视频</a></dt>
<dd>
<ul>
<li><a href="#">分享视频</a></li>
<li><a href="#">管理视频</a></li>
</ul>
</dd>
<dt><a href="javascript:void(0);">博客</a></dt>
<dd>
<ul>
<li><a href="">发布文章</a></li>
<li><a href="">管理内容</a></li>
</ul>
</dd>
</dl>
</div>

复制代码

暂时就写这么点吧。希望对大家有用。

好名字容易娶媳妇？乌兰浩特论坛悦买网-专业导购网快剧网 - 电视剧分集剧情网站

Ta最近还发表过 [分享] 2025报到 (25-03-01) [分享] 我想再用Kingcms6.0做几个网站玩玩 (24-09-22) [分享] 最近做了一个用户登录短信验证（阿里云的） (24-09-18) [分享] 2024你好kingcms (24-05-17) [使用] kingcms+chatgpt 输入标题自动生成文章内容如何？ (23-11-24)

随机阅读 [建议] 建议编辑器里可使用KINGCMS标签 (17-01-18) [帮助] 【积分商城】详细配置文档 (16-11-11) [分享] 刚做的网站，戳进来看看 (16-08-01) [疑问] 企业版ASP 如何做搜索搜页模板？ (13-11-12) [错误] 后台生成内容页，老是多数来几个编号相同的。 (13-03-18)

ybook8	发表于：10-09-15 21:58 沙发 [回复] #Top#
人气：5 积分：62 金币：50	好东西。

1Next >

发表回复

帐号	匿名发布审核后可见 [加载完整在线编辑器]
内容
验证码	计算题太难?换个简单点的.

我已认真阅读服务条款，并遵守具体协议内容

KingCMS 内容管理系统

关于我们联系我们广告报价付款方式站点导航

粤ICP备08008106号