0

我想同时使用水平和垂直菜单的魔术线 jquery 导航效果。 http://css-tricks.com/jquery-magicline-navigation/

$(function() {  var $el, leftPos, topPos;

我为我的效果选择了默认区域

$("#region-top-left").append("< li id='magic-line'></ li >");
var $magicLine = $("#magic-line");

我定义了第一个语句 - 当我将某些东西悬停在主水平菜单中时

            {

                $magicLine
                    .css("left", $('.active').position().left)

                .data("origLeft", $magicLine.position().left)

                ('.menu').find('li').hover(function () {

                    $el = $(this);
                    leftPos = $el.position().left;
                    magicLine.stop().animate({
                        left: leftPos,
                    });
                }, function () {
                    $magicLine.stop().animate({
                        left: $magicLine.data("origLeft"),

                    });
                });
            }

如果我将鼠标悬停在导航垂直菜单中

            else if ('#vertical-menu:hover')

去做

             {
                $magicLine
                    .css("top", $('.active').position().top)
                    .data("origTop", $magicLine.position().top)


                $('.menu').find('li').hover(function () {
                    $el = $(this);
                    topPos = $el.position().top;


                    $magicLine.stop().animate({
                        top: topPos,

                    });
                }, function () {
                    $magicLine.stop().animate({
                        top: $magicLine.data("origTop"),

                    });
                });
            }
        }
    };
}(jQuery));

但仅适用于第一个条件。我该怎么办？任何帮助将不胜感激。

更新。 感谢您的帮助戴夫和埃文。现在我的代码看起来像这样

(function ($) {

这是为了

Drupal.behaviors.exampleModule = {
attach: function (context, settings) {

德鲁巴

var $el, leftPos, topPos;
$("#region-top-left").append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

.on('hover',function() 不起作用

$('#horizontal-menu').hover(function() {
$magicLine
.css("left", $('.active').position().left)
.data("origLeft", $magicLine.position().left)


$('.menu').find('li').hover(function() {
    $el = $(this);
    leftPos = $el.position().left;


    $magicLine.stop().animate({
        left: leftPos,

    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),

    });
 }
 );});


  $('#vertical-menu').hover(function() {
    $magicLine

    .css("top", $('.active').position().top)
    .data("origTop", $magicLine.position().top)


  $('.menu').find('li').hover(function() {
    $el = $(this);
    topPos = $el.position().top;


        $magicLine.stop().animate({
        top: topPos,

         });
          }, function() {
     $magicLine.stop().animate({
        top: $magicLine.data("origTop"),

              });
           });
         });
        }   
     };   
   })
(jQuery);

它有效。耶！

4

2 回答 2

4

这

if ('#horizontal-menu:hover')

应该

$('#horizontal-menu').on('hover',function() {
//code goes here
});

这

if ('#vertical-menu:hover')

应该

$('#vertical-menu').on('hover',function() {
//code goes here
});
于 2013-05-01T23:15:16.287 回答
0

您不需要使用else if，只需创建两个事件，jQuery 将为您处理其余的

$('.menu').find('li').on('hover', function() {
    // code here ...
});

$('#another').on('hover', function(){
    // more code here...
});
于 2013-05-01T23:15:09.863 回答