0 
function rightFrame(e) {
    $('#' + e).css({
        'position': 'relative',
        'top': '0px',
        'left': '30px',
        'visibility': 'visible'
    });
    $('#' + e).show();
}

$(document).ready(function() {
    $('.link').mouseover(function(e) {
        rightFrame($(this).data('item'));
    });
    $('.link').mouseout(function(e) {
        if ($(this).is(":visible") == true) {
            if ($(this).is(':hover') == true) {
                $('.right').hide();
            }
        }
    });
});

好吧，只是为了符合条件，我对 jQuery 或 JavaScript 几乎一无所知。我从基本代码开始让下拉式框出现，然后摆弄它以使其保持原样。我的目标是当您将鼠标悬停在链接上时出现下拉菜单，同时仍然允许您在下拉菜单内单击，就像下拉导航应该那样。但是，正如我所说，当谈到 jQuery/JS 时，我有点傻。帮助！

PS - 链接是指您悬停在上面的链接，以便下拉菜单出现。Right 指的是下拉菜单本身。

<div id="leftcontent">
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r1">HOME<br /><span class="littlelink">THE HOMEPAGE</span></div></a>
        <a href="#"><div class="right" id="r1">asdf</div></a>
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r2">PORTFOLIO<br /><span class="littlelink">SOME OF MY WORK</span></div></a>
        <a href="#"><div class="right" id="r2">asdf</div></a>
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r3">PRICES<br /><span class="littlelink">YOUR INVESTMENT</span></div></a>
        <a href="#"><div class="right" id="r3">asdf</div></a>
    <hr size="1" color="#555" />
        <a href="#"><div class="link" data-item="r4">CONTACT<br /><span class="littlelink">GET IN TOUCH</span></div></a>
        <a href="#"><div class="right" id="r4">asdf</div></a>
    <hr size="1" color="#555" />
</div><!-- end leftcontent -->
4

2 回答 2

0

有时mouseout没有正确触发所以只需使用slideToggle(); fadeToggle();

$(document).ready(function() {
    $('.link').mouseover(function(e) {
    //$(this).closest('a').next('a').find('.right').fadeToggle(400); //ITS FOR YOUR OLD HTML
             $(this).find('.right').slideToggle(400);
            //above 50 is speed of animation
    });

});

使用此 html 进行下拉

<ul>
    <li class="link">
        <a href="#">Link....</a>
        <ul class="right">
            <li><a href="#">Sublink-1</a></li>
        </ul>
    </li>
</ul>
于 2013-09-21T09:07:53.813 回答
0

您需要将下拉项目定义为按钮的子项，这样当鼠标移到项目时它们不会消失（仅当项目位于按钮旁边时）

所以对于你的问题，我建议

<div class="link"> 
    <a href="..."> ... </a>
    <div class="right">
         <a href="..."> ... </a>
    </div>
</div>
于 2013-09-21T09:17:02.743 回答