手风琴无法与 table 一起正常工作

Question

我在 Accordian 中嵌套了 jquery table，但它似乎不起作用。甚至提交按钮也没有显示在手风琴面板之外。我尝试查看选项卡视图，但问题仍然存在。看起来与 jquery 冲突。请帮助我解决 this.Below 是我正在使用的代码。

`<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
        <script type="text/javascript">
        $(document).ready(function(){
            $('#sccb').click(function(){
                if (this.checked) {
                    $('#cns').removeAttr("disabled");
                    $('#cns2').removeAttr("disabled");
                    $('#cns3').removeAttr("disabled");
                    $('#cns4').removeAttr("disabled");
                    $('#cns5').removeAttr("disabled");
                    $('#cns6').removeAttr("disabled");
                    $('#cns7').removeAttr("disabled");
                } else {
                    $("#cns").attr("disabled", true);
                    $("#cns2").attr("disabled", true);
                    $("#cns3").attr("disabled", true);
                    $('#cns4').attr("disabled", true);
                    $('#cns5').attr("disabled", true);
                    $('#cns6').attr("disabled", true);
                    $('#cns7').attr("disabled", true);
                }
            });
        });
        </script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#sccb1').click(function(){
                if (this.checked) {
                    $('#cns8').removeAttr("disabled");
                    $('#cns9').removeAttr("disabled");
                    $('#cns10').removeAttr("disabled");
                    $('#cns11').removeAttr("disabled");
                    $('#cns12').removeAttr("disabled");
                    $('#cns13').removeAttr("disabled");
                    $('#cns14').removeAttr("disabled");

                } else {
                    $("#cns8").attr("disabled", true);
                    $("#cns9").attr("disabled", true);
                    $("#cns10").attr("disabled", true);
                    $("#cns11").attr("disabled", true);
                    $("#cns12").attr("disabled", true);
                    $("#cns13").attr("disabled", true);
                    $("#cns14").attr("disabled", true);
                }
            });
        });
        </script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#sccb2').click(function(){
                if (this.checked) {
                    $('#cns15').removeAttr("disabled");
                    $('#cns16').removeAttr("disabled");
                    $('#cns17').removeAttr("disabled");
                    $('#cns18').removeAttr("disabled");
                    $('#cns19').removeAttr("disabled");
                    $('#cns20').removeAttr("disabled");
                    $('#cns21').removeAttr("disabled");

                } else {
                    $("#cns15").attr("disabled", true);
                    $("#cns16").attr("disabled", true);
                    $("#cns17").attr("disabled", true);
                    $("#cns18").attr("disabled", true);
                    $("#cns19").attr("disabled", true);
                    $("#cns20").attr("disabled", true);
                    $("#cns21").attr("disabled", true);
                }
            });
        });
        </script>
        <script>

        jQuery(function($){
        $( document ).ready(function() {
            $( "select" ).change(function () {
                var val = this.value;
                if (val != 'select one') {
                    var tableRows = $("table tr");
                    jQuery.each(tableRows, function(i ,tr) {
                        if (i > val) {
                            $(tr).hide();
                        } else {
                            $(tr).show();
                        }
                    })
                }
              }
            )
        });
        });

        </script>
        <style>
        button.accordion {
            background-color: #33CCFF;
            color: #444;
            cursor: pointer;
            margin: 15px;
            padding: 14px;
            width: 1250px;
            border: 2px;
            text-align: left;
            font-family: Comic Sans MS;
            text-decoration: underline;
            font-weight: bold;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
            border:1px solid #ccc;
            border-radius:5px;
        }

        button.accordion.active, button.accordion:hover {
            background-color: #ddd;
        }

        button.accordion:after {
            content: '795';
            font-size: 14px;
            color: #777;
            float: right;
            margin-left: 5px;
        }

        button.accordion.active:after {
            content: "96";
        }

        div.panel {
            padding: 0 25px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: 0.6s ease-in-out;
            opacity: 0;
        }

        div.panel.show {
            opacity: 1;
            max-height: 1500px;
        }

        tbody tr {
        display: none;
        }
        </style>
    </head>
        <body>
        <button class="accordion"><big>Guardian's Details</big></button>
        <div id="foo" class="panel">
          <fieldset>
        <fieldset style="width: 1220px;">
        <legend style="font-weight: bold; font-family: Comic Sans MS;text-decoration: underline;">Personal Details</legend>
        <div style="width: 1230px;" class="form-group"> 
        <big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <select name="stugtitle" class="input" required>
        <option value="">--select--</option>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Mrs">Mrs</option>
        <option value="Ms">Ms</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugfname">Firstname<span style="color: red;">*</span></label></big>
        &nbsp;&nbsp;&nbsp;
        <input size="15" name="stugfname" class="input" required>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugmname">Middlename</label></big>
        &nbsp;&nbsp;&nbsp;
        <input size="15" class="input" name="stugmname">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugsname">Surname<span style="color: red;">*</span></label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input size="15" class="input" name="stugsname" required>
        </div>
        <br>
        <big><label for="stuggender">Gender<span style="color: red;">*</span></label></big>
        &nbsp;
        <select name="stuggender" class="input" required>
        <option value="">--select--</option>
        <option value="M">Male</option>
        <option value="F">Female</option>
        <option value="Mx">Mx</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugdob">Birthdate<span style="color: red;">*</span></label></big>
        &nbsp;&nbsp;&nbsp;&nbsp; 
        <input size="15" name="stugdob" class="input" type="date" required>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugmobile">Mobile<span style="color: red;">*</span></label></big>
        &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input size="15" class="input" name="stugmobile" required>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugemail">Email<span style="color: red;">*</span></label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input size="19" class="input" name="stugemail" type="email" required>
        </fieldset>
        <br><br>
        <fieldset>
        <fieldset style="width: 1220px;">
        <legend style="font-weight: bold; font-family: Comic Sans MS; text-decoration: underline;">Address Details</legend>
        <div style="width: 1230px;" class="form-group">
        <big><big><big><label for="stugaddress">Adress not same as applicant's address<span style="color: red;">*</span></label></big></big></big>
        &nbsp;&nbsp;
        <input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress">
        (<span style="color: red; font-family: Comic Sans MS;"><span style="color: rgb(51, 51, 51);"></span><style="font-weight: bold;">Please tick the box to enter the details</span>)<br>
              <br>
              <big><label for="stugadd1">Address Line 1</label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <input type="text" class="input" id="cns15" name="stugadd1" disabled="disabled"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
        <big><label for="stugadd2">Address Line 2</label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <input type="text" class="input" id="cns16" name="stugadd2" disabled="disabled"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
        <big><label for="stugadd3">Address Line 3</label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" class="input" id="cns17" name="stugadd3" disabled="disabled" size="18"/>
        <br>
        <br>
        <big><label for="stugcity">City</label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input size="15" class="input" type="text" id="cns18" name="stugcity" disabled="disabled"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugstate">State</label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input size="15" class="input" type="text" id="cns19" name="stugstate" disabled="disabled"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugcountry">Country</label></big>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input size="15" class="input" type="text" id="cns20" name="stugcountry" disabled="disabled"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <big><label for="stugpincode">Pincode</label></big>
        &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 
        <input size="10" class="input" type="text" id="cns21" name="stugpincode" disabled="disabled"/> </div>
        </fieldset>
        <br style="font-family: Comic Sans MS;">
        </div>

        <button class="accordion"><big>Sibling's Details</big></button>
        <div id="foo" class="panel">
        <big style="font-family: Comic Sans MS;"><big>Select Number of Siblings<span style="color: red; font-weight: bold;">*</span></big></big><span style="font-family: Comic Sans MS;"> </span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <select name="app_siblingno" class="input" required>
        <option value = "">--select one--</option>
        <option value = "0">0</option>
        <option value = "1">1</option>
        <option value = "2">2</option>
        <option value = "3">3</option>
        <option value = "4">4</option>
        <option value = "5">5</option>
        <option value = "6">6</option>
        </select>
        <br>
        <br>
        <div>
        <table style="text-align: centre; width: 500px;" border="0"
        cellpadding="0" cellspacing="0">
        <tbody>
        <tr>
        <td colspan="6" rowspan="1" style="vertical-align: top;">
        </td>
        </tr>
        <tr>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">S.No    1</span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Name</span>&nbsp;<input name="app_siblingname1" class="input">
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Birthdate</span>&nbsp;<input name="app_siblingdob1" class="input" type="date">
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Class</span>&nbsp;
        <select name="app_siblingclass1" class="input">
        <option value = "">--select one--</option>
        <option value = "12">XII</option>
        <option value = "11">XI</option>
        <option value = "10">X</option>
        <option value = "9">IX</option>
        <option value = "8">VIII</option>
        <option value = "7">VII</option>
        <option value = "6">VI</option>
        <option value = "5">V</option>
        <option value = "4">IV</option>
        <option value = "3">III</option>
        <option value = "2">II</option>
        <option value = "1">I</option>
        <option value = "KG">KG/Prep</option>
        <option value = "Nur">Nursery</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Gender</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <select name="app_siblinggender1" class="input">
        <option value = "">--select one--</option>
        <option value = "M">Male</option>
        <option value = "F">Female</option>
        <option value = "Mx">Mx</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;School Name</span>&nbsp;<input name="app_schlname1" class="input">
        </td>
        </tr>
        <tr>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">2</span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingname2" class="input"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingdob2" class="input" type="date"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblingclass2" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "12">XII</option>
        <option value = "11">XI</option>
        <option value = "10">X</option>
        <option value = "9">IX</option>
        <option value = "8">VIII</option>
        <option value = "7">VII</option>
        <option value = "6">VI</option>
        <option value = "5">V</option>
        <option value = "4">IV</option>
        <option value = "3">III</option>
        <option value = "2">II</option>
        <option value = "1">I</option>
        <option value = "KG">KG/Prep</option>
        <option value = "Nur">Nursery</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblinggender2" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "M">Male</option>
        <option value = "F">Female</option>
        <option value = "Mx">Mx</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingschlname2" class="input"></span>
        </td>
        </tr>
        <tr>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">3</span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname3" class="input"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob3" class="input" type="date"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass3" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "12">XII</option>
        <option value = "11">XI</option>
        <option value = "10">X</option>
        <option value = "9">IX</option>
        <option value = "8">VIII</option>
        <option value = "7">VII</option>
        <option value = "6">VI</option>
        <option value = "5">V</option>
        <option value = "4">IV</option>
        <option value = "3">III</option>
        <option value = "2">II</option>
        <option value = "1">I</option>
        <option value = "KG">KG/Prep</option>
        <option value = "Nur">Nursery</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender3" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "M">Male</option>
        <option value = "F">Female</option>
        <option value = "Mx">Mx</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname3" class="input"></span>
        </td>
        </tr>
        <tr>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">4</span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname4" class="input"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob4" class="input" type="date"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass4" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "12">XII</option>
        <option value = "11">XI</option>
        <option value = "10">X</option>
        <option value = "9">IX</option>
        <option value = "8">VIII</option>
        <option value = "7">VII</option>
        <option value = "6">VI</option>
        <option value = "5">V</option>
        <option value = "4">IV</option>
        <option value = "3">III</option>
        <option value = "2">II</option>
        <option value = "1">I</option>
        <option value = "KG">KG/Prep</option>
        <option value = "Nur">Nursery</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender4" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "M">Male</option>
        <option value = "F">Female</option>
        <option value = "Mx">Mx</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname4" class="input"></span>
        </td>
        </tr>
        <tr>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">5</span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname5" class="input"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob5" class="input" type="date"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass5" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "12">XII</option>
        <option value = "11">XI</option>
        <option value = "10">X</option>
        <option value = "9">IX</option>
        <option value = "8">VIII</option>
        <option value = "7">VII</option>
        <option value = "6">VI</option>
        <option value = "5">V</option>
        <option value = "4">IV</option>
        <option value = "3">III</option>
        <option value = "2">II</option>
        <option value = "1">I</option>
        <option value = "KG">KG/Prep</option>
        <option value = "Nur">Nursery</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender5" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "M">Male</option>
        <option value = "F">Female</option>
        <option value = "Mx">Mx</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname5" class="input"></span>
        </td>
        </tr>
        <tr>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">6</span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname6" class="input"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob6" class="input" type="date"></span>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass6" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "12">XII</option>
        <option value = "11">XI</option>
        <option value = "10">X</option>
        <option value = "9">IX</option>
        <option value = "8">VIII</option>
        <option value = "7">VII</option>
        <option value = "6">VI</option>
        <option value = "5">V</option>
        <option value = "4">IV</option>
        <option value = "3">III</option>
        <option value = "2">II</option>
        <option value = "1">I</option>
        <option value = "KG">KG/Prep</option>
        <option value = "Nur">Nursery</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender6" class="input"></span>
        <option value = "">--select one--</option>
        <option value = "M">Male</option>
        <option value = "F">Female</option>
        <option value = "Mx">Mx</option>
        </td>
        <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname6" class="input"></span>
        </td>
        </tr>
        </tbody>
        </div>
        </div>
        <button class="accordion"><big>Document Upload</big></button>
        <div id="foo" class="panel">
        <h1>upload document here<h1>
    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
         }
    }
    </script>
        &nbsp;&nbsp; <input id="app_submit1" class="button1" name="app_submit1" value="&lt;&lt;Back" type="submit"> <input class="button1" name="app_submit2" value="Save" type="submit"> <input class="button1" name="app_submit3" value="Submit" type="submit"> <input class="button1" name="app_cancel2" value="Cancel" type="reset"><br>
        </body>
</html>

Answer 1

兄弟姐妹详细信息中缺少 table 标签

手风琴无法与 table 一起正常工作

Accordian not working properly with table

jquery-ui-accordion

bootstrap-accordion