1

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左側にくるようにします。現時点では、唇は右側にあります。

質問：

.dropdowns の右上隅を s の右下隅に揃えるにはどうすればよい.navigation3ですか?

jsfiddle の例:

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

4

2 に答える 2

3

次のように試すことができます：

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/

于 2012-11-27T12:16:31.467 に答える
1

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;
}
于 2012-11-27T12:19:39.463 に答える