【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) 随机阅读 [使用] 如何修改 “文章管理”模板中普通管理员只有添加功能 (14-07-15) [疑问] 谁知道自定义模型的下拉菜单内容，前台怎么调用 (13-03-05) [帮助] 升了是時候了啊怀胎10月该生了 (12-12-13) [疑问] 调用图片路径出错了！求解！！ (11-12-02) [使用] 大吐血超蓝模板-非原创-绝对好板子跪求解决二个小问题 (11-08-06)

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)

随机阅读 [使用] 如何修改 “文章管理”模板中普通管理员只有添加功能 (14-07-15) [疑问] 谁知道自定义模型的下拉菜单内容，前台怎么调用 (13-03-05) [帮助] 升了是時候了啊怀胎10月该生了 (12-12-13) [疑问] 调用图片路径出错了！求解！！ (11-12-02) [使用] 大吐血超蓝模板-非原创-绝对好板子跪求解决二个小问题 (11-08-06)

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

1Next >

发表回复

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

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

KingCMS 内容管理系统

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

粤ICP备08008106号