0

我的页面中有以下 div 层次结构！

<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>

我正在设计一个 Web 应用程序，我在其中加载账单并使用 jQuery 创建每个账单。所以我创建了账单的每个元素并将它们附加到账单面板！我已经使用以下代码启用了账单列表的滚动。我使用 dragscroller 作为滚动插件。

$('#bill-list').dragscrollable({dragSelector: '#bill-panel', acceptPropagatedEvent: true});

并且账单有一个它自己的点击事件，我使用 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;
}

所有这些效果都很好。问题是当我展开账单面板底部的元素时，它会展开，但我必须手动滚动才能查看展开的部分。我不知道如何解决它！

我需要的是帮助执行以下操作。有一个可以滚动的账单列表。每张账单大约有 5 个账单项目。当我在账单面板底部展开一个元素时，账单应该会自动滚动以显示展开的账单。

在此处输入图像描述

4

1 回答 1

0

您是否尝试过使用 jQuery scrollTo() 插件？在这种情况下可能会有所帮助。信息和下载在这里。

于 2013-05-08T05:30:46.380 回答