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 slideDown和show/hide方法

左面板：

将商品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相同。

@{
    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();
    });
});

演示：

$(".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>

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

1 个答案: