使用JavaScript / jQuery应用位置绝对样式

Apply position absolute style using JavaScript / jQuery

本文关键字：样式 位置 应用 JavaScript jQuery 使用      更新时间：2023-09-26

我正在创建一个导航向右对齐的网站。

最后一个下拉菜单项位于父菜单项的绝对左侧，从页面上运行。

我正在尝试为下面的菜单创建一个解决方案。

jsfiddle - http://jsfiddle.net/ashconnolly/6gjVr/

我不能硬编码pos左-xx样式，因为最后一个菜单项的宽度会有所不同(由于它里面的文本)，因此我使用js。我几乎破解了它，但我只需要在悬停上应用一个变量作为绝对左边的位置样式。也许有一个更好的纯css解决方案，但我找不到。

任何帮助都是感激的!: D

编辑:更新的解释

你已经计算了上一个菜单的左侧，为什么不使用?

$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
    $("#last-menu-item").mouseenter(function(){
        $("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
    });
    $("#last-menu-item").mouseleave(function(){
        $("#last-menu-item-drop-down").css({'display':'none'});
    });
});
这里的

检查

您可能已经知道，使用框架"打印"javascript值是不好的做法。它很快就会变得不可维护。

但是您可以将(元素)逻辑从(元素)表示中分离出来，即通过在html中设置data-attribute在模板中打印/格式化html元素:

<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">

然后把你的javascript改成:

// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...

你也可以在javascript中做偏移计算，只在模板中指定位置

小提琴在:http://jsfiddle.net/cYsp6/7/

我不能用css 

$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
 $("#last-menu-item-drop-down").css('position','absolute').css('left',a);
 $("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
   $("#last-menu-item-drop-down").hide();
});

更新小提琴:

小提琴

相关文章：