1. Open and close at the same time.

2, can be closed at the same time, only one can be opened.

3. One must be opened

The following is the js code, I have written a lot of comments in the code itself

Animation effects can be added as required

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src=http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js></script>
<style>
.detail{
        
    background-color: #f2f2f2;
    }

    .detailbox{
        height: 100px;
background-color: #f4f4f4!important;
border-top:1px solid #5e49da;
}                    

    .hide{
     display: none;
    }

    .xq{
        cursor: pointer;
    }

</style>
<body>
<div class="bs-example" data-example-id="bordered-table">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th >1</th>
            <td>Mark</td>



            <td>Otto</td>
            <td class="xq" id="x1" onclick="showdetial('x1');">详情</td>
        </tr>
        <tr   class="hide xq_content detailbox">
         <td colspan="4">
             这里是你的详情内容
         </td>
        </tr>
        <tr>
            <th >2</th>
            <td>Jacob</td>
            <td>Thornton</td>



            <td class="xq" id="x2" onclick="showdetial('x2');">详情</td>
        </tr>
        <tr  class="hide xq_content detailbox">
            <td colspan="4">
                这里是你的详情内容
            </td>
        </tr>
        <tr>
            <th >3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td class="xq" 


id= "x3" onclick= " showdetial ( 'x3' ) ; " > details </td>
         </tr>
         <tr class= "hide xq_content detailbox" >
             <td colspan= "4" >
                 here is your detail content
             </td>
         </tr>
         </tbody>
     </table>
 </div>
 </body>
 </html>
 <script>
 /*description.hide
 display:none
 .detail
 background-color:#f2f2f2;
 let first All xq_content added.
hide hides the background color of the clicked element, and the frame that displays the details
 */






/*可以同时关闭，只能打开一个*/
/*思路：
* 1、先让点击元素的所有兄弟都一起背景色都没有detail属性，
* 2、让当前点击元素toggle背景色detial属性
* 3、通过背景色判断xq_content是否显示
* 4、现将所有详情框框添加hide
* 5、判断点击元素是否有detail,有就将hide移除，否则添加
* */
//    function showdetial(id) {
//
//        $("#"+id+"").parent().siblings().removeClass('detail');
//        $("#"+id+"").parent().toggleClass('detail');
//
//        $('.xq_content').addClass('hide');
//        if($("#"+id+"").parent().hasClass('detail')){
//            $("#"+id+"").parent().next().removeClass('hide');
//        }else {
//            $("#"+id+"").parent().next().addClass('hide');
//        }
//    }


/*It can be opened at the same time, and it can be closed at the same time*/
 /*
 * Ideas:
 * 1. Let the click element toggleClass() detail and hide exist without detail originally, and hide instead of hide
 *
 * */
 function showdetial (id ) {  

   // $("#"+id+"").parent().siblings().removeClass('detail');
$("#"+id+"").parent().toggleClass('detail');
//$(".xq_content").hide();
$("#"+id+"").parent().next().toggleClass('hide');
}   
      




/*必须打开一个*/
/*思路：
1、先让点击元素的所有兄弟都一起背景色没有detail属性，
2、让当前点击元素添加背景色detial属性
3、让所有显示详情的元素都隐藏起来添加hide
4、让当前点击的元素的详情toggelClass hide属性，也就是有hide的就成了没有hide也就显示出来了
*/

// function showdetial(id) {
//
//      $("#"+id+"").parent().siblings().removeClass('detail');
//      $("#"+id+"").parent().addClass('detail');
//
//      $('.xq_content').addClass('hide');
//      $("#"+id+"").parent().next().toggleClass('hide');
//
// }

</script>

4、github地址https://github.com/tengcaifeng/toggle_menu

The ultimate version of menu display and hide switching, with three transformations

1. Open and close at the same time.

2, can be closed at the same time, only one can be opened.

3. One must be opened

4、github地址https://github.com/tengcaifeng/toggle_menu

Guess you like