如何在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/