如何根据ID值在页面加载中加载div

Question

我在JQuery面板上使用SlideUp slideDown和show/hide方法。如何默认加载或显示第一条记录的联系信息？

现在，由于我设置了面板display:none，它加载为空白：<div class="panel rpspanel panel-default" id="@item.ID" style="display: none">否则，如果我有多个结果，它将全部加载。

需要帮助来在页面加载时加载第一个。其余的点击事件均能完美运行。

左面板：

将项目ID（或任何唯一值）传递到li属性中的data-id上>

<ul id="treeview">
     @foreach (var item in rpInfo)
        {
          <li data-expanded="true" class="panel-handler" data-id="@item.id">
              <i class="fa fa-check-circle"></i>@item.PartyName
                <ul>
                     <li data-expanded="true">  <i class="fas fa-check-circle"></i> @item.ContactName </li>
                 </ul>
           </li>
         }
  </ul>  
右面板：

id attribute所有面板。 我在左面板中通过的相同id。

  @foreach (var item in rpInfo)
            {                    
                var DeleteModal = "#myModal" + item.ID;                   
                var mid = "myModal" + item.ID;
                <div class="panel rpspanel panel-default" id="@item.ID" style="display: none">
                              Contact Information</h4>
                          </div>
                          <div class="panel-body">
                              <div class="card card-understated">
                                  <div class="card-heading">
                                      <h4>@(Localizer["Contact Preview "])</h4>
                                  </div>
                                  <div class="card-body">
                                      <p>
                                          @item.ContactName<br>
                                          @item.ContactTitle<br>
                                          @item.PartyName<br>
                                          @item.AddressLine1<br />
                                          @item.City, @item.State @item.Country
                                      </p>
                                  </div>
                              </div>                          
                          </div>
                      </div>
                  }
jQuery脚本：

li click左侧面板上的[获得data-id属性值。隐藏所有面板。显示具有指定id属性的面板。

    $(document).ready(function() {
        $(".panel-handler").click(function() {
            let id = $(this).data("id");
            $(".rpspanel").slideUp();
            $("#" +id).slideDown();
        });
    });

我正在使用JQuery SlideUp和slideDown方法显示/隐藏面板。如何默认加载或显示第一条记录的联系信息？现在它加载为空白，因为我设置了面板...

Answer 1

基于function为slideDown()功能单独创建id，并在加载文档时传递第一个id的.panel-handler：