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

1Next >

updatex	发表于：10-09-01 18:47 [取消收藏] [添加收藏] 楼主 [回复] #Top#
人气：1518 积分：1551 金币：32240	说明：所谓超级简单的伸缩菜单就是没什么装饰，纯粹实现了这种效果，点一级菜单，伸展开子级菜单，点击另一个一级菜单时，展开本菜单的子菜单，其他展开的子菜单收缩。本人表述能力不行，直接上代码吧。下面是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> 复制代码暂时就写这么点吧。希望对大家有用。好名字容易娶媳妇？乌兰浩特论坛悦买网-专业导购网快剧网 - 电视剧分集剧情网站德阳123 Ta最近还发表过 [分享] 2024你好kingcms (24-03-30) [分享] 最近做了一个用户登录短信验证（阿里云的） (23-12-20) [使用] kingcms+chatgpt 输入标题自动生成文章内容如何？ (23-11-24) [分享] 调用下级栏目 4年了，一直在用这个系统 (23-11-17) [疑问] 如何在发布页面增加图片上传功能呢？ (23-04-17) 随机阅读 [其他] 来一到IO题 (12-08-28) [分享] 想請人做個商家頁面,融入主站的VIP (12-08-11) [其他] 新人灌水 (12-07-19) [疑问] 我想问问asp版本的帮助文档有木有？ (12-01-04) [其他] 没月饼，连天上那个都看不到，最郁闷的中秋节！ (11-09-13)

updatex

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

人气：1518 积分：1551 金币：32240

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

复制代码

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

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

Ta最近还发表过 [分享] 2024你好kingcms (24-03-30) [分享] 最近做了一个用户登录短信验证（阿里云的） (23-12-20) [使用] kingcms+chatgpt 输入标题自动生成文章内容如何？ (23-11-24) [分享] 调用下级栏目 4年了，一直在用这个系统 (23-11-17) [疑问] 如何在发布页面增加图片上传功能呢？ (23-04-17)

随机阅读 [其他] 来一到IO题 (12-08-28) [分享] 想請人做個商家頁面,融入主站的VIP (12-08-11) [其他] 新人灌水 (12-07-19) [疑问] 我想问问asp版本的帮助文档有木有？ (12-01-04) [其他] 没月饼，连天上那个都看不到，最郁闷的中秋节！ (11-09-13)

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

1Next >

发表回复

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

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

KingCMS 内容管理系统

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

广州唯众网络科技有限公司粤ICP备08008106号