Jquery三级菜单切换


<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>

你可能感兴趣的:(java,script)