Javascript 如何按id加载面板？

我有两个面板

rpspanel

和

sppanel

面板如何根据所选列表ID显示或隐藏它们

我有以下清单：

 <ul id="list" style="line-height: 0.01;">
      @foreach (var item in compInfo)
             {
              <li data-expanded="false" class="panel-handler" data-id="@item.ID">@item.CompanyName
                 @foreach (var scontractor in item.SubContractor)
                    {
                      <ul>
                         <li class="panel-handler" data-expanded="true" data-id="@subcontractor.ID">@scontractor.Name</li>
                       </ul>
                     }                                    
               </li>
            }
  </ul>

我的第一个小组：

  @foreach (var item in compInfo)
            {
          <div class="panel rpspanel panel-default" id="@item.ID">
                        <div class="panel-heading">
                           <h5>Contact Information<h5>
                        </div>
                        <div class="panel-body">                      
                            <div class="card card-default">
                                <div class="card-heading">
                                    <h4>Contact Details</h4>
                                </div>
                                <div class="card-body">
                                    <p>
                                        @item.Name<br>
                                        @item.Phone<br>
                                        @item.Email<br>                                          
                                    </p>
                                </div>
                            </div>
              </div>
    </div>
    }

@foreach（compInfo中的变量项）
{
联系方式
联系方式

@项目名称

@项目.电话

@项目.电子邮件


}

我的第二个小组

@foreach (var scontractor in item.Contractors)
{
    <div class="panel sppanel panel-default" id="@scontractor.ID">
        <div class="panel-heading">
           <h5>Contact Information<h5>
        </div>
        <div class="panel-body">                      
            <div class="card card-default">
                <div class="card-heading">
                    <h4>Contact Details</h4>
                </div>
                <div class="card-body">
                    <p>
                        @scontractor.Name<br>
                        @scontractor.Phone<br>
                        @scontractor.Email<br>
                    </p>
                </div>
            </div>
        </div>
    </div>

@foreach（项目承包商中的var承包商）
{
联系方式
联系方式

@承包商名称

@承包商电话

@承包商电子邮件

$（文档）.ready（函数（）{
$（“.panel handler”）。单击（函数（事件）{
$（.rpspanel.sppanel”）.slideUp（）；
var$this=$（this）；
//显示李点击
showInfo（$this.data（“id”））；
如果（$this.hasClass（'company'））{
//如果是公司，则显示该公司下的所有承包商
$this.find（“.contractor”）。每个（函数（索引，el）{
showInfo（$（el）.data（“id”）；
});
}else if（$this.hasClass（'contractor'））{
//如果是承包商，则向公司展示该承包商
showInfo（$this.closest（'.company'）.data（“id”））；
}
返回false；
});
函数showInfo（id）{
$（“#”+id）.slideDown（）；
}
//首次装载
$（“.panel handler:first”）。单击（）；
})；

.panel处理程序{
光标：指针；
}

.面板处理程序{
光标：指针；
}

公司1
承包商1A
承包商1B

公司2
承包商2A
承包商2B


公司详情

公司1

555-555-1111

company1@fake.com


承包商详细信息

承包商1A

承包商555-1111A

contractor1a@fake.com


承包商详细信息

承包商1B

承包商555-1111B

contractor1b@fake.com


公司详情

公司2

555-555-2222

company2@fake.com


承包商详细信息

承包商2A

承包商555-2222A

contractor2a@fake.com


承包商详细信息

承包商2B

承包商555-2222B

contractor2b@fake.com

你好，Steve，出于某种原因谢谢你

返回false；

隐藏嵌套的

我根据你的上述评论对我的答案进行了更改，现在的代码-单击公司时显示所有承包商-单击承包商时显示承包商和母公司感谢Steve它工作了，但不是子公司或

sppanel

couldnt replace

rpspanel panel default

。此外，当我嵌套li时，单击我开始向上滑动并向下滑动，我仍然有问题

返回false；

仍然产生问题，但我得到了我想要的在面板中显示嵌套li信息时，我有展开折叠图标-当

返回false；

$（文档）.ready（函数（）{$（“#树视图”）.kendoTreeView（）；$（“.panel处理程序”）.click（函数（事件）{$（“.rpspanel.spanel”）.slideUp（）；var$this=$（this）；//Show li clicked showInfo（$this.dat）
@foreach (var scontractor in item.Contractors)
{
    <div class="panel sppanel panel-default" id="@scontractor.ID">
        <div class="panel-heading">
           <h5>Contact Information<h5>
        </div>
        <div class="panel-body">                      
            <div class="card card-default">
                <div class="card-heading">
                    <h4>Contact Details</h4>
                </div>
                <div class="card-body">
                    <p>
                        @scontractor.Name<br>
                        @scontractor.Phone<br>
                        @scontractor.Email<br>
                    </p>
                </div>
            </div>
        </div>
    </div>