如何在jQuery中单击该按钮时显示相对于按钮位置的div答案

【问题标题】：How to show a div relative to the position of a button on click of that button in jQuery如何在jQuery中单击该按钮时显示相对于按钮位置的div
【发布时间】：2015-03-10 17:46:37
【问题描述】：

这是我的代码：

$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 应该在按钮的顶部打开。问题是我在页面中有很多按钮，并且在单击每个按钮时，相同的 div 将相对于被单击按钮的位置打开。

见附件截图：

【问题讨论】：

看起来您正在正确使用this 来获取按钮位置。您只需要show、slideDown 或fadeIn。有什么问题？
是的，我想获取按钮位置并在单击按钮时在按钮顶部显示#content div。但是在运行代码时显示错误“未定义不是函数”
到底在哪一行？该错误通常意味着未加载 jQuery。
您缺少右括号。因此，错误可能出现在以后的函数中。
啊，你是对的@isherwood 感谢您指出

标签： javascript jquery

【解决方案1】：

您可以使用.offset() 找到单击按钮的当前位置（相对于文档）然后据此更改您的 div 的偏移量。

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

});

这是一个小例子：http://jsfiddle.net/zje0uu9y/1/

【讨论】：