jquery - 将 div 标签与另一个 div 标签对齐

Question

感谢Chris Moutray ，我有以下脚本几乎可以完美运行。

jQuery：

$('.navigation3').click(function(event) {
    var $nav3 = $(this),
        $dd = $nav3.next('.dropdown');

    $nav3.toggleClass('active');

    var offset = 20,
        offsettop = $nav3.offset().top + $nav3.height() + offset,
        offsetleft = $nav3.offset().left;

    $dd.css({
        top: offsettop,
        left: offsetleft
    });

    $nav3.hasClass('active') ? $dd.show() : $dd.hide();
});​

问题：

唯一的问题是.dropdown's 出现了，所以 's 的左上角.dropdown紧挨着 's 的左下角.navigation3。

所以基本上，.dropdown's 的唇应该在左侧。此刻，嘴唇在右侧。

问题：

如何让.dropdowns' 的右上角与 s' 的右下角对齐.navigation3？

jsfiddle 示例：

http://jsfiddle.net/MTESY/19/

Answer 1

你可以这样尝试：

var leftoffset = $dd.width() - $nav3.width();

var offset = 20,
    offsettop = $nav3.offset().top + $nav3.height() + offset,
    offsetleft = $nav3.offset().left-leftoffset ;

http://jsfiddle.net/MTESY/20/

Answer 2

您可能需要考虑一种更语义化的方式来使用更少的 CSS 和 jQuery 编写菜单 - DEMO

HTML

<ul id="menu">
    <li>click me 1
        <ul>
            <li>icon Default 1</li>
        </ul>
    </li>
    <li>click me 2
        <ul>
            <li>icon Default 2</li>
        </ul>
    </li>
    <li>click me 3
        <ul>
            <li>icon Default 3</li>
        </ul>
    </li>
</ul>

jQuery

$("#menu > li").on("click", function() {
    var $ul = $(this).find("ul");
    if ( $ul.is(":hidden") ) { $ul.show(); } else { $ul.hide(); }
});

​</p>

​CSS

#menu {
    float: right;
    background:#555;
}

#menu li {
    float:left;
    padding:10px;
    cursor:pointer;
    position: relative;
}

#menu li ul {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    white-space: nowrap;
    background: #c00;
}