我有兩個面板來顯示聯系人詳細信息和公司名稱左右。有時我可能會垂直列出 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> }
1 回答
慕桂英546537
TA貢獻1848條經驗 獲得超10個贊
我假設您在記錄中有一個唯一的 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();
});
});
演示：
- 1 回答
- 0 關注
- 108 瀏覽
添加回答
舉報
0/150
提交
取消