我有兩個(gè)面板來(lái)顯示聯(lián)系人詳細(xì)信息和公司名稱(chēng)左右。有時(shí)我可能會(huì)垂直列出 4 個(gè)以上的聯(lián)系人詳細(xì)信息In Right Panel，看起來(lái)很糟糕，所以我在想，當(dāng)我從左側(cè)面板中單擊聯(lián)系人姓名時(shí)，我想在右側(cè)面板中顯示所選的聯(lián)系人信息并隱藏其他信息。另外，我希望第一個(gè)聯(lián)系信息成為默認(rèn)信息。在左面板中：為了顯示公司信息，我有以下代碼。<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> 在右側(cè)面板中：為了顯示公司信息，我有以下代碼。 @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貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超10個(gè)贊
我假設(shè)您在記錄中有一個(gè)唯一的 ID。
我正在使用面板的JQuery SlideUp方法slideDownshow/hide
左面板：
將項(xiàng)目 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到所有面板。與我們?cè)谧髠?cè)面板中傳遞的內(nèi)容相同。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 腳本：
在左側(cè)面板上li click獲取data-id屬性值。
隱藏所有面板。
顯示具有指定 id 屬性的面板。
$(document).ready(function() {
$(".panel-handler").click(function() {
let id = $(this).data("id");
$(".panel").slideUp();
$("#" +id).slideDown();
});
});
演示：
- 1 回答
- 0 關(guān)注
- 119 瀏覽
添加回答
舉報(bào)
0/150
提交
取消