316 votos

¿jQuery: Cómo colocar un elemento en relación con otro?

Tengo un DIV oculto que contiene el menú de un barra de herramientas-like.

Tengo un número de elementos "div" que están habilitadas para mostrar el menú DIV cuando el ratón sobre ellos.

¿Hay una función incorporada que trasladará el menú DIV en la parte superior derecha del activo (hover mouse) DIV? Estoy buscando algo parecido$(menu).position("topright", targetEl);

362voto

Jacob Puntos 9117

tl;dr: (probar aquí)

Si usted tiene los siguientes HTML:

<div id="menu" style="display: none;">
   <!-- menu stuff in here -->
   <ul><li>Menu item</li></ul>
</div>

<div class="parent">Hover over me to show the menu here</div>

a continuación, puede utilizar el siguiente código JavaScript:

$(".parent").mouseover(function() {
    // .position() uses position relative to the offset parent, 
    var pos = $(this).position();

    // .outerWidth() takes into account border and padding.
    var width = $(this).outerWidth();

    //show the menu directly over the placeholder
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.left + width) + "px"
    }).show();
});

Pero no funciona!

Esto funcionará siempre como el menú y el marcador de posición tienen el mismo desplazamiento de los padres. Si no lo hacen, y no han anidado las reglas CSS que cuidado donde en el DOM de la #menu elemento, utilice:

$(this).append($("#menu"));

justo antes de la línea que las posiciones de la #menu elemento.

Pero aún así no funciona!

Podría tener algo de extraño diseño que no funciona con este enfoque. En ese caso, sólo tiene que utilizar jQuery.ui posición del plugin (como se mencionó en la respuesta de abajo), que se encarga de todo tipo de eventualidad. Tenga en cuenta que deberás show() el elemento del menú antes de llamar a position({...}); el plugin no puede colocar elementos ocultos.

Actualización de las notas 3 años después, en 2012:

(La solución original es archivado aquí para la posteridad)

Así, resulta que el método original que yo había aquí era mucho de ser la ideal. En particular, se produciría un error si:

  • el menú del desplazamiento de los padres no es el marcador de posición del desplazamiento de los padres
  • el marcador de posición tiene un borde/relleno

Por suerte, jQuery introdujo los métodos (position() y outerWidth()) en el camino de regreso 1.2.6 que facilitan la búsqueda de los valores de la derecha en el último caso aquí mucho más fácil. Para el caso anterior, appending en el elemento de menú para el marcador de posición de obras (pero va a romper las reglas CSS basado en la anidación).

180voto

Uriel Puntos 1561

Ahora puede utilizar:

$("#my_div").position({
    my:        "left top",
    at:        "left bottom",
    of:        this, // or $("#otherdiv)
    collision: "fit"
})

Para el diagnóstico rápido (jQuery ui/posición).

Nota: Esto requiere jQuery UI (no sólo jQuery).

Usted puede Descargar jQuery UI aquí.

12voto

paul Puntos 4903

Esto es lo que funcionó para mí en el final.

var showMenu = function(el, menu) {
	//get the position of the placeholder element  
	var pos = $(el).offset();    
	var eWidth = $(el).outerWidth();
	var mWidth = $(menu).outerWidth();
	var left = (pos.left + eWidth - mWidth) + "px";
	var top = 3+pos.top + "px";
	//show the menu directly over the placeholder  
	$(menu).css( { 
		position: 'absolute',
		zIndex: 5000,
		left: left, 
		top: top
	} );

	$(menu).hide().fadeIn();
};

6voto

Venkat D. Puntos 1103

Aquí es un jQuery función escribí que me ayuda a colocar los elementos.

Aquí hay un ejemplo de uso:

$(document).ready(function() {
  $('#el1').position('#el2', {
    anchor: ['br', 'tr'],
    offset: [-5, 5]
  });
});

El código de arriba alinea la parte inferior-derecha de #el1 con la parte superior-derecha de #el2. ['cc', 'cc'] centro de #el1 en #el2. Asegúrese de que #el1 tiene el css de position: absolute y z-index: 10000 (o muy grande) para mantener en la parte superior.

La opción de desplazamiento le permite empujar a las coordenadas por un número de píxeles especificado.

El código fuente es el siguiente:

jQuery.fn.getBox = function() {
  return {
    left: $(this).offset().left,
    top: $(this).offset().top,
    width: $(this).outerWidth(),
    height: $(this).outerHeight()
  };
}

jQuery.fn.position = function(target, options) {
  var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
  var defaults = {
    anchor: ['tl', 'tl'],
    animate: false,
    offset: [0, 0]
  };
  options = $.extend(defaults, options);

  var targetBox = $(target).getBox();
  var sourceBox = $(this).getBox();

  //origin is at the top-left of the target element
  var left = targetBox.left;
  var top = targetBox.top;

  //alignment with respect to source
  top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
  left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;

  //alignment with respect to target
  top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
  left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;

  //add offset to final coordinates
  left += options.offset[0];
  top += options.offset[1];

  $(this).css({
    left: left + 'px',
    top: top + 'px'
  });

}

4voto

gtamil Puntos 318

¿Por qué complicar demasiado? La solución es muy simple

CSS:

.active-div{
position:relative;
}

.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}

jQuery:

$(function(){
    $(".active-div").hover(function(){
    $(".menu-div").prependTo(".active-div").show();
    },function(){$(".menu-div").hide();
})

Funciona incluso si,

  • Dos divs colocados en cualquier otro lugar
  • Navegador redimensionada

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X