Javascript 如何滚动元素以为扩展元素腾出空间
我的页面中有以下div层次结构Javascript 如何滚动元素以为扩展元素腾出空间,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我的页面中有以下div层次结构 <div id="bill-list"> <div id="bill-panel"> <!-- Bill --> <div class="bill"> <!-- Bill description - Holds Bill details --> <div class="bill-description">
<div id="bill-list">
<div id="bill-panel">
<!-- Bill -->
<div class="bill">
<!-- Bill description - Holds Bill details -->
<div class="bill-description">
<div class="bill-info bill-number"><span>000A</span></div>
<div class="bill-info table-name"><span>TABLE 78</span></div>
<div class="bill-info room-number"><span>A678</span></div>
<div class="bill-info amount"><span>76.00 USD</span></div>
<div class="bill-remove-icon"></div>
</div>
<!-- Bill Item list -->
<div class="bill-item-list">
<!-- Item : This is a sample element & will be cleared when system loads -->
<div class="bill-item">
<!-- Item image -->
<div class="bill-item-img"></div>
<!-- Item description -->
<div class="bill-item-description">
<div class="bill-item-name">
<!-- Item Name -->
<p class="bill-item-name-left">Normal Cofee</p>
<!-- Item Price -->
<p class="bill-item-name-right">170.00</p>
<div class="clear"></div>
</div>
<!-- Total item price -->
<div class="bill-item-price">
<span>170.00 USD</span>
</div>
<!-- Item Quantity -->
<div class="bill-item-amount">
<span>1</span>
</div>
</div>
<!-- Increas & Decrease item Quantity -->
<div class="bill-amount-selection">
<a class="amount-increase" href="#"></a>
<a class="amount-decrease" href="#"></a>
</div>
</div>
<!-- Remove bill link -->
<div class="item-drop-point"></div>
</div>
</div>
</div>
</div>
账单有一个自己的点击事件,我使用jQuery滑动切换展开账单
$(document).on('click',".bill-description",function()
{
//close all bills
$(".bill-item-list").not($(this).next(".bill-item-list")).slideUp(600);
//open the clicked bills
$(this).next(".bill-item-list").slideToggle(600);
});
上述代码关闭打开的任何其他元素,并展开单击的票据。以下是用于元素的CSS
#bill-list {
max-height: 581px;
overflow: hidden;
}
#bill-panel {
max-height: 575px;
}
.bill {
width: 100%;
margin-top: 2px;
}
.bill-description {
height: 30px;
font-family: MyriadProReg;
background-color: rgb(214, 214, 214);
cursor: pointer;
}
所有这些效果都很好。问题是,当我展开bill面板底部的元素时,它会被展开,但我必须手动滚动以查看展开的部分。我不知道如何修理它
我需要的是一个帮助来做以下事情。有一个可以滚动的账单列表。每张账单大约有5个账单项目。当我展开bill面板底部的元素时,bills应该自动滚动以显示展开的bill
您是否尝试过使用jQuery scrollTo()插件?在这种情况下可能会有所帮助。信息和下载。我试过了,但没用!它不会滚动到展开元素。你必须告诉它滚动到哪个位置,所以你需要做一些计算,找出要滚动到的元素的顶部。为此,请尝试使用jQuery方法.offset()。
#bill-list {
max-height: 581px;
overflow: hidden;
}
#bill-panel {
max-height: 575px;
}
.bill {
width: 100%;
margin-top: 2px;
}
.bill-description {
height: 30px;
font-family: MyriadProReg;
background-color: rgb(214, 214, 214);
cursor: pointer;
}