Jquery三级菜单切换

最新推荐文章于 2021-06-05 08:18:55 发布
最新推荐文章于 2021-06-05 08:18:55 发布
阅读量1.8k 收藏
点赞数
分类专栏： java script
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HelloKitty520123/article/details/50553622
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
        <script type="text/javascript">

            $(function() {
                //一级菜单点击
                $('#first li').click(function() {
                    var id = $(this).attr('id');
                    console.log(id);
                    //$("#ruleType_"+id).siblings('tr not(.act)').css("display","none");
                    $("tr[id*='ruleType_']").css("display","none");
                    $("#ruleType_"+id).css("display","");          

                });

            });
            //二级菜单点击
            function chooseClass(id){
                $("tr[id*='ruleType_t_']").css("display","none");
                $("#ruleType_t_"+id).css("display","");
            }

        </script>
    </head>
    <body>
        <table>

                <tr class="act">
                    <td>规则类型：</td>
                    <td>
                        <ul id="first">
                            <li id="1">触发规则</li>
                            <li id="2">免打扰规则</li>
                            <li id="3">接触控制规则</li>                      

                        </ul>
                    </td>
                </tr>



                <tr id="ruleType_1" style="display: none;">
                    <td>触发规则类型：</td>
                    <td>
                        <ul>
                            <li id="11" onclick="chooseClass('11')">位置触发</li>
                            <li id="12" onclick="chooseClass('12')">系统触发</li>
                        </ul>
                    </td>
                </tr>
                <tr id="ruleType_2" style="display: none;">
                    <td>免打扰规则类型:</td>
                    <td>
                        <ul>
                            <li id="21" onclick="chooseClass('21')">红黑名单规则</li>
                            <li id="22" onclick="chooseClass('22')">自定义规则</li>
                        </ul>
                    </td>
                </tr>
                <tr id="ruleType_3" style="display: none;">
                    <td>接触控制规则</td>
                    <td>
                        <ul>
                            <li id="31">输入周期次数</li>
                        </ul>
                    </td>
                </tr>



                <tr id="ruleType_t_11" style="display: none;" >
                    <td>位置触发</td>
                    <td>上传文件</td>
                </tr>
                <tr id="ruleType_t_12" style="display: none;">
                    <td>4G首话单</td>
                    <td>
                        <ul>
                            <li>是</li>
                            <li>否</li>
                        </ul>
                    </td>
                </tr>

                <tr id="ruleType_t_21" style="display: none;">
                    <td>红黑名单</td>
                    <td>
                        <ul>
                            <li>红名单</li>
                            <li>黑名单</li>
                        </ul>
                    </td>
                </tr>
                <tr id="ruleType_t_22" style="display: none;">
                    <td>自定义规则</td>
                    <td>选择免打扰客户群</td>
                </tr>

        </table>
    </body>
</html>
hongyewell
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery操作节点完成三级菜单文字按钮来回转换
qq_38507112的博客
11-08 152
效果如图 这是一个三级菜单，点击如图： 再次切换如图 同时也可以选择一级和二级菜单，不多展示 html代码如下： &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&...
jquey复选框三级分类关联一二级分类
dfgh41252的专栏
02-13 172
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Category_Manage_New_Two.aspx.cs" Inherits="Lilaidao.Admin.Weblogin.Category_Manage_New_Two" %> <%@ Register Src="botto...
jQuery实现三级联动菜单
m0_46390103的博客
05-27 1289
jQuery实现三级联动菜单效果 思路：首先需要获取相对数据接口，我这里举例的城市接口，我准备在city.json文件中。然后使用jquery中的方法实现三级菜单联动。 js代码如下： <script> ! function($) { let $show = $('#show'); //显示框 let $prov = $('#prov'); //省份 let $city = $('#city'); //城市
html5 jq三级菜单,jQuery三级下拉列表导航菜单代码分享
weixin_39699670的博客
06-05 635
本文实例讲述了jQuery三级下拉列表导航菜单，分享给大家供大家参考，具体如下jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js，可无限极分类，可智能判断是否有下级菜单，鼠标经过上次菜单显示下级菜单。运行效果图： -------------------查看效果-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式...
jquery 多级无限分类
weixin_30797199的博客
03-09 148
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title> xx </title> <meta http-equiv="Content...
jquery 实现二级/三级/多级联动菜单的思路及代码
10-27
jQuery的AJAX功能和asp.net来实现省市区的三级联动效果，其他二级、三级或多级联动也可以按照此方法完成，由此需求的朋友可以参考下哈，希望可以帮助到你
jQuery三级下拉导航菜单
09-10
总结起来，创建jQuery三级下拉导航菜单涉及HTML结构设计、CSS样式设置以及jQuery脚本编写。通过理解这些基础知识并熟练运用，开发者可以创建出既美观又实用的导航菜单，提升用户体验。在实际项目中，还需要考虑...
jQuery商品发布三级联动菜单代码
06-24
4. **二级联动**：同样，为二级菜单绑定`change`事件，当用户选择时，根据所选值获取三级菜单数据并更新。这个过程可以递归，如果需要四级、五级联动菜单。 5. **选择特效**：描述中提到的支持选择展示特效，可以...
jQuery手机垂直二级菜单切换
11-03
在构建手机垂直二级菜单时，jQuery可以提供流畅的过渡效果和简洁的代码结构。 一、HTML结构 创建一个手机二级菜单的第一步是设置基础的HTML结构。通常，我们会有个主菜单列表，每个列表项可能包含一个子菜单。例如...
jQuery三级下拉列表导航菜单特效代码
03-20
首先，"jQuery三级下拉列表导航菜单特效代码"指的是使用jQuery来构建一个多级深度的导航菜单。这种菜单通常用于大型网站，因为它可以有效地组织大量页面，让用户在几级菜单之间轻松切换。在这个项目中，我们基于`...
JQuery 三级联动
落花人独立，微雨燕双飞。
05-08 345
参考了：https://blog.csdn.net/dwl0208/article/details/82716112的代码，但是拿过来不能直接用，所以在他的基础上做了一点改动，在此记录下，方便像我这样的js小白使用。
jQuery实现三级菜单
XDarker的博客
05-25 2566
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
JQuery 实现三级菜单
weixin_46390620的博客
03-09 1122
三级菜单 效果图： 文中所用图片如下： 基本代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>三级菜单</title> </head> <script src="https://cdn.bootcss.c...
三级菜单：有滚动跳转和选择展示相应内容
liona_koukou的博客
08-15 822
效果图如下：（此菜单可以应用于电商种类选择页面，此处是仿优车诚品官网首页） 代码如下，可直接复制粘贴查看效果   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
[Angular2+]构造三级Tab目录切换
对未知的一切抱有热忱
01-25 575
目录 知识点： 目录结构： 思路： 最外层容器： 一级的内容（outter) inner同理 看了关于官网的指令层面的tab和动态修改组件，不大适用 就用纯component和input来构造 知识点： @Input,ngChanges生命钩子，组件。 目录结构： （组件用cli自动生成即可，svc也是）outter就是那个sidebar，innner就是面板，当然你需...
三级地区切换（组件化开发）
qq_41951724的博客
11-14 235
三级级联地区切换 说明：组件化开发，结合使用express框架搭建后台，axios传递数据，使用mysql数据库。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>唯品会
jQuery实战_tab栏切换
热门推荐
大脸猫~
06-25 1万+
jQuery实现tab栏切换 HTML结构： CSS： active 用来显示下划线 selected 用来控制显示（默认都是隐藏的） JS： $(function(){ $(&amp;quot;ul&amp;amp;gt;li&amp;quot;).mouseenter(function(){ //给li添加下横线 $(this).addClass('active').siblings(...
jquery ajax 三级 下拉菜单
最新发布
05-25
以下是一个简单的 jQuery AJAX 三级下拉菜单的示例： HTML代码： ```html 请选择 请选择 请选择 ``` JavaScript代码： ```javascript $(document).ready(function() { $('#first-dropdown').on('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值