JQ点击展开二级菜单

最新推荐文章于 2023-11-21 11:59:43 发布
最新推荐文章于 2023-11-21 11:59:43 发布
阅读量2.8k 收藏 5
点赞数
分类专栏： javascript/Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013239233/article/details/52296829
版权

JQuery控制点击展开二级菜单，以下为测试代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
    <head> 
        <title>JQ点击展开二级菜单</title> 
<script class="jquery library" src="jquery-1.8.2.min.js" type="text/javascript"></script>
       <script>
            jQuery(function($){
                $("ul>li>a").click(function(){
                    $(this).next("ul").toggle().closest("li").siblings("li").children("ul").hide();
                }).next("ul").hide();
            });
        </script>
    </head> 
    <body> 
        <ul>
            <li>
                <a>
                    一级菜单
                </a>
                <ul>
                    <li>
                        隐藏的二级菜单项
                    </li>
                    <li>
                        隐藏的二级菜单项
                    </li>
                    <li>
                        隐藏的二级菜单项
                    </li>
                </ul>
            </li>
            <li>
                <a>
                    一级菜单
                </a>
                <ul>
                    <li>
                        隐藏的二级菜单项
                    </li>
                    <li>
                        隐藏的二级菜单项
                    </li>
                    <li>
                        隐藏的二级菜单项
                    </li>
                </ul>
            </li>
            <li>
                <a>
                    一级菜单
                </a>
                <ul>
                    <li>
                        隐藏的二级菜单项
                    </li>
                    <li>
                        隐藏的二级菜单项
                    </li>
                    <li>
                        隐藏的二级菜单项
                    </li>
                </ul>
            </li>
    </ul>
    </body> 
</html>
u013239233
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现可点击伸缩与展开的菜单效果代码
11-24
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下： 这是一款jquery实现的点击伸缩与展开的菜单代码，操作方式大家都知道吧，点击一下展开二级菜单的内容，再次点击则合拢，很经典的折叠菜单。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-click-show-hidden-menu-style-codes/ 具体代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
Java的二级动态菜单实现
prime1019的博客
05-24 3450
这个二级菜单不同于上次写的多级菜单的实现，此次目的关联两张表，上次的多级菜单是一张表，所以区别在此，实现起来也有所不同。 实现图如下： 这里是一级列表，对应的是组名（RescueUnit） 这里是二级展开列表，对应的是组名下的人员（Staff） Action代码如下： public String middle() { setNodestree(nodestree());...
jq实现展开收缩两种切换效果
weixin_34354945的博客
11-27 891
第一种： <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function() { $("#toggle").click(function() { $(this).te...
JQuery实现-展开折叠效果
fengxue_snow的博客
07-31 7070
JQ实现-展开折叠查看全部 1.默认情况下，第五条之后的内容被隐藏； 2.点击展开时，全部显示，并给品牌0、品牌5字体改为红色。 默认显示为折叠状态： 展开状态： 代码： <style> /*common css begin*/ *{margin:0px;padding:0px;} body{font-family: 微软雅黑,Microsoft yahei,Ar...
Axure RP9——【导航栏二级菜单的展开效果】
两条线-twolines
11-12 6797
导航栏二级菜单的展开效果
JQuery 实现点击展开内容
最新发布
qq_38865642的博客
11-21 268
如果您希望完全移除"read more"链接，并且只想在excerpt中显示特定数量的字词，可以在主题的functions.php文件中覆盖默认的excerpt长度，以便它不会自动生成"read more"链接。如果您想要修改链接文本，可以将return ''更改为return ‘YOUR_CUSTOM_TEXT’，将"YOUR_CUSTOM_TEXT"替换为您希望显示的自定义文本。当点击"read more"按钮时，它将使用slideToggle方法来展开或折叠内容，并根据展开状态切换按钮文本。
jQuery实现下拉菜单[代码+详细讲解+效果图]
热门推荐
心态的博客
05-09 1万+
jQuery实现下拉菜单[代码+详细讲解+效果图] 非常的高效。
4.jQuery下拉菜单
qq_34620296的博客
12-16 111
效果展示 鼠标经过显示,离开隐藏 代码如下 <style> * { margin: 0; padding: 0; } li { list-style-type: none; ...
Jquery如何实现菜单折叠及其点击链接实现对应菜单展开
Mjxiaomihu的博客
07-18 1949
Jquery如何实现菜单折叠及其点击链接实现对应菜单展开
JQ效果—展开和收起
xiaoxing1213的博客
06-08 1281
1.首先把按钮和文本内容写上，文本内容顺便去找一篇内容就行。2.展开 slideDown 写法如下3.收起 slideUp 写法如下4.切换展开和收起 slideToggle 写法如下
jquery实现点击向下展开菜单项(伸缩导航)效果
12-07
这里演示基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上合拢，平时只显示一级菜单，二级菜单是隐藏不显示的，代码简洁，包括了完整...
jQuery实现淡入淡出二级下拉导航菜单的方法
10-23
主要介绍了jQuery实现淡入淡出二级下拉导航菜单的方法,涉及jquery简单操作页面元素展开与隐藏的实现技巧,非常具有实用价值,需要的朋友可以参考下
jquery实现向下滑出的二级导航下滑菜单效果
01-19
这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效，带颜色的是一级主菜单，点击后会展开向上滑出二级的子菜单，再次点击主菜单，会合拢子菜单，就菜单所能展现的功能来说，适用于企业网站产品分类、...
jQuery左侧垂直四级导航菜单特效特效代码
03-20
jQuery左侧垂直四级导航菜单特效是一款Win8风格左侧垂直四级导航菜单网页特效，采用字体图标，鼠标滑过右侧弹出二级。
jq 改变其他兄弟元素的样式
u013239233的博客
02-06 6044
分类：                              全部                                                           {$bt.typename}                                                              
js 解决由于&#65279（bom文件格式）产生的空白行
u013239233的博客
08-29 3027
把以下代码放到HTML页面的head标签里就行了： var a=document.body.innerHTML; document.body.innerHTML=a.replace(/\ufeff/g,'');
php jQuery把后台返回的json数据赋值给页面标签
u013239233的博客
08-20 3001
首先把后台获取到的数据转换成json格式： public function findgzhAction(){ $ter=M('ter_addinfo'); $id=I('get.id'); $gzhinfo=$ter->where('id='.$id)->find(); echo json_encode($gzhinfo); //转成json数据 } 然后在前
php + js读取解析JSON类型数据
u013239233的博客
08-22 2782
一、使用PHP查询出数据，然后转换成json数据返回结果： public function findgzhAction(){ $ter=M('ter_addinfo'); $id=I('get.id'); $gzhinfo=$ter->where('id='.$id)->find(); echo json_encode($gzhinfo);  } 二、前台页面解析json数据：
帮我写一个jq三级可折叠点击的三级菜单
09-18
这样，点击菜单时，就会展开或折叠相应的子菜单，从而实现了一个可折叠点击的三级菜单。 希望以上回答能够帮到您！如果有任何问题，请随时提问。 ### 回答3： 当然可以帮您写一个具有三级可折叠点击功能的jQuery...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值