如何在单击时隐藏和显示面板？

Question

我有两个面板来显示联系人详细信息和公司名称左右。有时我可能会垂直列出 4 个以上的联系人详细信息In Right Panel，看起来很糟糕，所以我在想，当我从左侧面板中单击联系人姓名时，我想在右侧面板中显示所选的联系人信息并隐藏其他信息。另外，我希望第一个联系信息成为默认信息。在左面板中：为了显示公司信息，我有以下代码。<ul id="treeview">     @foreach (var item in rpInfo)        {          <li data-expanded="true"><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>       在右侧面板中：为了显示公司信息，我有以下代码。 @foreach (var item in rpInfo)                    {                        <div class="panel panel-default">                            <div class="panel-heading">                                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>                    }

Answer 1

我假设您在记录中有一个唯一的 ID。

我正在使用面板的JQuery SlideUp方法slideDownshow/hide

左面板：

将项目 id（或任何唯一值）传递给liindata-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>  

右面板：

$(".panel-handler ").click(function() {

    let id = $(this).data("id");

    if ($("#" + id).css('display') === 'none') {

        $(".panel ").slideUp();

        $("#" + id).slideDown();

    }

});

.panel-handler {

    display: inline-block

}

.panel {

    display: none;

}

.panel-default {

    display: inline;

}

.left-panel {

    float: left;

    width: 154px;

    border-right: 2px solid #000;

    padding: 10px;

}

.left-panel li {

    display: inline-block;

    width: 100%;

    height: 20px;

    margin-bottom: 9px;

    border-bottom: 0.1px solid #000;

    cursor: pointer;

}

.right-panel {

    float: left;

    padding: 10px;

    width: 200px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="left-panel">

    <h2>Left panel</h2>

    <ul>

        <li class="panel-handler" data-id="1">Panel-1 handler</li>

        <li class="panel-handler" data-id="2">Panel-2 handler</li>

        <li class="panel-handler" data-id="3">Panel-3 handler</li>

    </ul>

</div>

<div class="right-panel">

    <h2>Right panel</h2>

    <div class="panel panel-default" id="1">Panel-1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

    <div class="panel " id="2">Panel-2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

    <div class="panel " id="3">Panel-3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

</div>

添加id attribute到所有面板。与我们在左侧面板中传递的内容相同。id

@{

    int counter = 1;

  }

    @foreach (var item in rpInfo)

                      {

                          <div class="@(counter++ == 1 ? "panel panel-default" : "panel")" id="@item.id" >

                              <div class="panel-heading">

                                  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");

        $(".panel").slideUp();

        $("#" +id).slideDown();

    });

});

演示：