如何在jQuery中單擊按鈕時顯示相對於按鈕位置的div

Question

這是我的代碼：

$j(".btn-cart").on("click", function( e ){
            e.preventDefault();
            var top = $(this).offset().top;
            alert(top);
            $j("#content").animate({ 
            top: top
            }, 600);

        }

HTML：

對於要顯示的div：

 <div id="angularJsApp" title="Basket" ng-app="cart" ng-controller="CartFormController">
        <div id="content" class="draggable" style="display:none;" ng-show="invoice.items.length > 0">
              <input type="checkbox" name="check" id="check"/>
              <label for="check">
              <div id="heads" >
                 <span id="commentBubble">
                   <a href=""><apex:image value="{!URLFOR($Resource.CartStyleBundle,'Shopping-Cart-Button.png')}" alt="" /></a>
                 </span>
              </div>

              <article class="pane" id="user_1">

                <table class="table table-checkout">
                    <tr>

                        <th>Description</th>
                        <th>Qty</th>
                        <th>Cost</th>
                        <th>Total</th>
                        <th></th>
                    </tr>
                    <tr ng-repeat="item in invoice.items">
                        <td>{{item.description}}</td>           
                        <td>{{item.qty}}</td>
                        <td>{{item.cost}}</td>
                        <td>{{item.qty * item.cost | currency : "£" }}</td>
                        <td>
                            [<a href="" ng-click="removeItem($index)" style="cursor: pointer;">X</a>]
                        </td>
                    </tr>
                     <tr>
                        <td></td>
                        <td>Total:</td>
                        <td>{{total() | currency : "£" }}</td>

                    </tr> 
                </table>


            </article>

              </label>
            </div> 
        </div>

和HTML的按鈕：

<apex:outputPanel id="basketPanel" layout="none">                            
                        <a href="#content" class="btn-cart">
                            <apex:commandButton styleClass="btn btn-default btn-buy" onClick="microappscope().addItem('{!p.name}',{!p.Recommended_Retail_Price__c});" value="Add to Basket" id="btn" rerender="btn" action="{!addProductToCart}" >
                                <apex:param name="pId" value="{!p.Id}" assignTo="{!selectedProductId}"/>
                            </apex:commandButton>
                        </a>
                    </apex:outputPanel>

我想顯示ID為#content的div，默認情況下，單擊按鈕類btn-cart其隱藏。 並且div應該在按鈕頂部打開。 問題是我在頁面中有許多按鈕，並且在單擊每個按鈕時，相對於被單擊按鈕的位置，將打開相同的div。

請參閱所附的屏幕截圖：

Answer 1

您可以使用.offset()找到被單擊按鈕的當前位置（與文檔.offset() ，然后根據該位置更改div的偏移量。

$('button').click(function(){
   var pos = $(this).offset();
    $('#toShow').show();
    $('#toShow').offset( pos );

}); 

這是一個小示例： http : //jsfiddle.net/zje0uu9y/1/