在javascript中的表切换之后，侧边栏切换不起作用

Question

在我的应用程序中有一个侧边栏，当我们点击它时它会切换。我也想隐藏并显示一些表数据但是当我为此添加代码时，侧边栏不会切换。我知道为什么会发生这种情况。

我想要隐藏表格列，但是当我这样做时，我的侧边栏下拉列表停止工作。

此代码用于侧边栏切换工作正常。

 function goToUrl(id)
        {
            if(user_type_id!=3)
            {
                if(id==0)
                {

                    $('.hideAndShow').toggle();
                    document.location="Doctor";//News
                }
                else
                if(id==1)
                {

                    $('.hideAndShow').toggle();
                    document.location="Device";//cases                    
                }
                if(id==2)
                {
               //     $('#addJournals').toggle();
                 //   $('#listingJournals').toggle();
                    $('.hideAndShow').toggle();                   
                    document.location="Associate";//journal                    
                }
                if(id==3)
                {

                    $('.hideAndShow').toggle();
                    document.location="Patient";//gallery                    
                }                

            }
            else
            {

                if(id==0)
                    document.location="Doctor";
                else
                if(id==1)
                    document.location="Device";
                if(id==2)
                    document.location="Associate";
                else
                if(id==3)
                    document.location="Patient";

            }

        }


<aside class="left-side sidebar-offcanvas" style="min-height: 260px;">                
                <!-- sidebar: style can be found in sidebar.less -->
                <section class="sidebar">
                    <!-- Sidebar user panel -->
                    <!-- <div class="user-panel">
                        <div class="pull-left image">
                            <img src="img/avatar3.png" class="img-circle" alt="User Image">
                        </div>
                        <div class="pull-left info">
                            <p id="imageAdmin"></p>

                            <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                        </div>
                    </div> -->
                    <ul class="sidebar-menu">

                        <!-- <li  id='dashboard'>                        
                            <a href="/dashboard">
                                <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                            </a>
                        </li> -->
                        <li class='treeview' id='Doctor'>                             
                            <a href="#">
                                <!-- <i class="fa fa-table"></i> -->
                                 <i id="icon-color" class="fa fa-stethoscope"></i> 
                                <span onclick="goToUrl(0)">Manage Doctor</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li class="hideAndShow">
                                    <a href="/addDoctor?id=0" style="margin-left: 10px;">
                                        <i class="fa fa-angle-double-right"></i> Add 
                                    </a>
                                </li>
                                <li class="hideAndShow">
                                    <a href="/doctor?id=1" style="margin-left: 10px;">
                                        <i class="fa fa-angle-double-right"></i> Listing 
                                    </a>
                                </li>
                           </ul>
                        </li>
                        <li  class='treeview' id='Device'>                            
                            <a href="#">
                                <!-- <i class="fa fa-table"></i> -->

                              <i id="icon-color" class="fa fa-mobile"></i>
                                <span onclick="goToUrl(1)">Manage Device</span>
                                <i class="fa fa-angle-left pull-right"></i>
                            </a>
                            <ul class="treeview-menu">
                                <li class="hideAndShow">
                                    <a href="/addDevice" style="margin-left: 10px;">
                                        <i class="fa fa-angle-double-right"></i> Add 
                                    </a>
                                </li>
                                <li class="hideAndShow">
                                    <a href="/device?id=1" style="margin-left: 10px;">
                                        <i class="fa fa-angle-double-right"></i> Listing 
                                    </a>
                                </li>
                           </ul>
                        </li>



                        <li class='active' id='Report'>                            
                            <a href="/reports">
                                <!-- <i class="fa fa-table"></i>  -->
                                <i id="icon-color" class="fa fa-list-alt"></i>

                                <span>Reports</span>   
                            </a>
                        </li>
                    </ul>
                </section>
                <!-- /.sidebar -->
            </aside>

但是当我添加以下代码侧边栏不切换

时

 $(document).ready(function(){
    $("#hi").click(function(){
        // $("p").hide();
        $('td:nth-child(3)').hide();  
    });
    $("#sh").click(function(){
        // $("p").show();
        $('td:nth-child(3)').show();  
    });
});

请帮帮我。