Question

我想同时使用魔术线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));

但只是第一个条件。我该怎么办？任何帮助将不胜感激。

更新感谢您的帮助 dave 和 Evan 。现在我的代码看起来像那样

(function ($) {

这是为了

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

drupal的

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

。对（ '悬停'，函数（） 没用？

$('#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);

它有效。耶！

Answer 1

此

if ('#horizontal-menu:hover')

应该是

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

此

if ('#vertical-menu:hover')

应该是

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

Answer 2

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

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

$('#another').on('hover', function(){
    // more code here...
});

“否则如果”在jQuery中没有执行

2 个答案: