javascript - jQuery 中的 "else if"未执行

Question

我想同时使用 magic line 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('悬停',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);

并且它有效。耶!

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