代码之家  ›  专栏  ›  技术社区  ›  Joel Martinez

使用jquery显示与另一个元素相关的元素

  •  2
  • Joel Martinez  · 技术社区  · 15 年前

    我正在开发一个界面,它要求用户可以点击一个按钮,然后我将显示一个浮动的DIV,它相对于按钮的位置(你可以把它看作是当你点击下拉菜单上的向下箭头时显示的区域)。

    如何正确地将这个浮动元素定位在单击的按钮旁边(页面上的任何位置)?

    事先谢谢!!

    3 回复  |  直到 11 年前
        1
  •  1
  •   Joel Martinez    15 年前
    <input type="button" id="btn" value="Choose Something" />
    
    <div id="select">
      ...
    </div>
    

    CSS:

    #select { position: absolute; display: none; }
    

    和JavaScript:

    $("#btn").click(function() {
      var sel = $("#select");
      var pos = $("#btn").offset();
      if (sel.is(":hidden")) {
        sel.attr({
          top: pos.top + 20,
          left: pos.left
        });
        sel.show();
      } else {
        sel.hide();
      }
    });
    

    基本上,您绝对可以将浮动DIV从正常流中移除,然后使用 offset() 找出与按钮相关的位置。

        2
  •  5
  •   Nick Craver    15 年前

    你可以得到按钮的位置 by using .offset()

    例如:

    $("#myButton").click(function() {
      var o = $(this).offset();
      $("#myDiv").css({'position': 'absolute','left':o.left,'top',o.top});
    });
    

    这会把它放在按钮的正上方,只要把左/上调整到你想要的位置。

    例如,要将其放在按钮下方,请将顶部更改为 'top': o.top + $(this).height() 或按钮右侧: 'left':o.left + $(this).width()

        3
  •  1
  •   Ethan Joffe    11 年前

    如果元素是按层次结构定位的,那么您应该使用.offset()来获取和设置位置。

    例如2

    <input type="button" id="myButton" value="Choose Something" 
         style="position: absolute; top: 100px;" />
    <div style="position: absolute; top: 200px;">parent div
        <div id="myDiv" style="position: absolute; top: 20px;">child div</div>
    </div>
    
    $("#myButton").click(function () {
        var o = $(this).offset();
        $("#myDiv").offset({
            'left': o.left,
            'top': o.top - 20
        });
    });
    

    这是一把小提琴: http://jsfiddle.net/R5YM6/1/