如何根據 ID 值在頁面加載上加載 div

Question

我使用JQuery SlideUp和slideDown方法來show/hide面板。 如何默認加載或顯示第一條記錄聯系人信息？

現在它加載空白，因為我設置了面板display:none : <div class="panel rpspanel panel-default" id="@item.ID" style="display: none">否則，如果我有多個結果，它會加載所有.

需要幫助在頁面加載時加載第一個。 其余的點擊事件完美運行。

左面板：

將項目 id（或任何唯一值）傳遞給data-id屬性中的li

<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左側面板上li click獲取data-id屬性值。
隱藏所有面板。
顯示具有指定 id 屬性的面板。

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

Answer 1

根據id為slideDown()功能slideDown()一個單獨的function ，並在加載文檔時傳遞第一個.panel-handler id ：

$(document).ready(function() {
    $(".panel-handler").click(function() {
        showInfo($(this).data("id"));        
    });

    function showInfo(id){
        $(".rpspanel").slideUp();
        $("#" +id).slideDown();
    }

    // For first time
    showInfo($(".panel-handler").eq(0).data("id"))
});