jQuery ancho, outerWidth(), innerWidth() devuelve datos incorrectos

Por alguna razón, no puedo llegar jQuery para darme fiable ancho de datos para varios elementos. Aquí hay un enlace a un violín que muestra el problema:
http://jsfiddle.net/snoopydaniels/ZDbaa/1/

Estoy intentando crear un multidimensionales menú desplegable. Como se puede ver en la jsfiddle, la segunda anidada menú no está posicionado correctamente. El jQuery que yo empleo a la posición de las consultas de los hermanos de anclaje del elemento mediante outerWidth() para descubrir su anchura, entonces sest la posición de la izquierda de la lista anidada según la devolución de ancho. Cuando me dan el hermano de anclaje elemento de un ancho establecido en el CSS, a continuación, obtener algo cerca de el valor correcto, pero sin que la estática de ancho, outerWidth() devuelve «2.»

Pero incluso cuando doy de anclaje de los elementos de un conjunto de ancho, outerWidth(true) todavía no incorporar correctamente el borde del elemento.

Estoy a punto de tirar de mi pelo. ¿Por qué no una mierda como esta el trabajo como en el anuncio?

InformationsquelleAutor Daniel Arant | 2012-08-23

4 Kommentare

  1. 14

    Los diversos ancho de comandos no funcionan para elementos ocultos (display: none).

    Si utiliza css para establecer un ancho de jquery devolverá ese. De lo contrario, usted no conseguirá ninguna, o sin sentido, los resultados.

    La solución clásica es la posición del elemento en la pantalla, compruebe el ancho, a continuación, ocultar y poner de nuevo. (Usted probablemente puede encontrar un plugin de jquery que hará que en un comando.)

    A veces hay maneras de reestructurar el html y/o css para evitar esto.

    A veces usted puede fijar el tamaño de la derecha después de mostrar el elemento.

    También puede probar la configuración de la visibility a hidden, por lo que el elemento obtiene un tamaño, pero es invisible. Dependiendo de su diseño podría funcionar esto.

    • Su propuesta inicial era realmente correcto, pero la lógica de mi revisión inicial era errónea. Una vez que me dio el guión de una oportunidad para recuperar el ancho antes .hide()ing en el elemento, los números eran sensatas.
  2. 1

    Tuve un problema similar en la recepción de lo que parecía ser al azar los resultados cuando se llama jQuery ancho de funciones. Cuando el navegador se actualiza, me gustaría conseguir la respuesta correcta sobre el 50 por ciento del tiempo.

    Cometí el error de inmediato comprobar el ancho del div en el $(document).listo() función. Cuando me cambié a llamar outerWidth() dentro de $(window).load(), la respuesta correcta era siempre regresó.

  3. 1

    Usted necesita llamar a $(window).trigger('resize') que va a provocar un falso cambio de tamaño de ventana de evento.
    Posteriormente, el outerWidth debe tener el valor correcto.

    Asegúrese de que la activación de la ventana falsa evento de cambio de tamaño una vez que los datos se rellena.

    En otras palabras, si usted está comprobando el ancho de un <td> dentro de un <th> por ejemplo, asegúrese de que la tabla se llena y todo el cambio de tamaño se realiza antes de activar el falso evento de cambio de tamaño y la comprobación de la outerWidth.

    Esta es una solución debido a las limitaciones mencionadas por Ariel en https://stackoverflow.com/a/12085210/774630

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea