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

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">&nbsp; &nbsp; &nbsp;@foreach (var item in rpInfo)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-expanded="true" class="panel-handler" data-id="@item.id">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-check-circle"></i>@item.PartyName&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li data-expanded="true">&nbsp; <i class="fas fa-check-circle"></i> @item.ContactName </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; </ul>&nbsp;&nbsp;右面板：$(".panel-handler ").click(function() {&nbsp; &nbsp; let id = $(this).data("id");&nbsp; &nbsp; if ($("#" + id).css('display') === 'none') {&nbsp; &nbsp; &nbsp; &nbsp; $(".panel ").slideUp();&nbsp; &nbsp; &nbsp; &nbsp; $("#" + id).slideDown();&nbsp; &nbsp; }});.panel-handler {&nbsp; &nbsp; display: inline-block}.panel {&nbsp; &nbsp; display: none;}.panel-default {&nbsp; &nbsp; display: inline;}.left-panel {&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 154px;&nbsp; &nbsp; border-right: 2px solid #000;&nbsp; &nbsp; padding: 10px;}.left-panel li {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; margin-bottom: 9px;&nbsp; &nbsp; border-bottom: 0.1px solid #000;&nbsp; &nbsp; cursor: pointer;}.right-panel {&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; width: 200px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="left-panel">&nbsp; &nbsp; <h2>Left panel</h2>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li class="panel-handler" data-id="1">Panel-1 handler</li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="panel-handler" data-id="2">Panel-2 handler</li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="panel-handler" data-id="3">Panel-3 handler</li>&nbsp; &nbsp; </ul></div><div class="right-panel">&nbsp; &nbsp; <h2>Right panel</h2>&nbsp; &nbsp; <div class="panel panel-default" id="1">Panel-1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>&nbsp; &nbsp; <div class="panel " id="2">Panel-2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>&nbsp; &nbsp; <div class="panel " id="3">Panel-3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div></div>添加id attribute到所有面板。与我们在左侧面板中传递的内容相同。id@{&nbsp; &nbsp; int counter = 1;&nbsp; }&nbsp; &nbsp; @foreach (var item in rpInfo)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="@(counter++ == 1 ? "panel panel-default" : "panel")" id="@item.id" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-heading">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Contact Information</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="panel-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card card-understated">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-heading">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>@(Localizer["Contact Preview "])</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @item.ContactName<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @item.ContactTitle<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @item.PartyName<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @item.AddressLine1<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @item.City, @item.State @item.Country&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }Jquery 脚本：在左侧面板上li click获取data-id属性值。隐藏所有面板。显示具有指定 id 属性的面板。$(document).ready(function() {&nbsp; &nbsp; $(".panel-handler").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; let id = $(this).data("id");&nbsp; &nbsp; &nbsp; &nbsp; $(".panel").slideUp();&nbsp; &nbsp; &nbsp; &nbsp; $("#" +id).slideDown();&nbsp; &nbsp; });});演示：