將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的不斷出現，因此.dropdown的左上角的是旁邊.navigation3的左下角。

所以基本上，.dropdown's的嘴脣應該在左側。此刻，嘴脣在右側。

問題：

如何獲得.dropdown S'右上角與.navigation3 S的右下角對齊？

的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(); } 
}); 

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; 
}