Magento菜单上的自定义JavaScript

Question

我正在尝试通过将以下内容放入local.xml将自定义Java脚本文件添加到Magento

<action method="addJs"><script>nav/navigation.js</script></action>

navigation.js

$sub = $('div.col-md-2.right-content');
$('div.col-md-10').on({
    mouseenter: function() {
        var i = $(this).index();
        $sub.addClass('li-'+i);
    }, mouseleave: function() {
        $sub.removeClass().addClass('col-md-2.right-content');

    }
})

style.css

li.level2.nav-2-1-1.first{
    background-color: green;
    }
li.level2.nav-2-1-2.last{
    background-color: red;
    }

这样做的目的是，每当用户将鼠标悬停在我的子菜单内的链接上时，正确的内容就会相应更改。 问题是我的navigation.js文件的目标是直到菜单加载后才存在的对象。 它们是“ div.col-md-2.right-content”和“ div.col-md-10”。

菜单加载后，是否可以加载javascript？ 还是有另一种方法可以做到这一点？ 还是我只是在解决这个完全错误的问题。

Answer 1

您可以使用$(function() { ... } )语法使该代码仅在加载所有DOM之后运行：

$(function() {
    $sub = $('div.col-md-2.right-content');
    $('div.col-md-10').on({
        mouseenter: function() {
            var i = $(this).index();
            $sub.addClass('li-'+i);
        }, mouseleave: function() {
            $sub.removeClass().addClass('col-md-2.right-content');
        }
    })
})

请注意， 仅当菜单是原始DOM的一部分（HTML代码的一部分）并且不是动态创建的时，此菜单才有效 。

如果菜单是动态生成的，则可以使用：

$('body').on('mouseenter', 'div.col-md-10', function() { ... });

这是一个工作示例：

 $(function() { $sub = $('.subject'); $('body') .on('mouseenter', '.yeah', function() { var i = $(this).index(); $sub.addClass('li-'+i); }) .on('mouseleave', '.yeah', function() { $sub.removeClass().addClass('subject'); }) $('.test').append($(' <ul> <li class="yeah"><a href="#">Link 1</a></li> <li class="yeah"><a href="#">Link 1</a></li> <li class="yeah"><a href="#">Link 1</a></li> </ul>')); }); 

 .li-0{ background-color:green; } .li-1{ background-color:red; } .li-2{ background-color:blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test"> </div> <div class="subject"> <p>hello</p> </div> 

Answer 2

我认为问题出在local.xml中的路由内

<default>
    <reference name="head">
         <action method="addItem">
            <type>skin_js</type><name>js/navigation.js</name><params/>
        </action>        
    </reference>
</default>

navigation.js所在的位置：注意（开发人员/模板）是皮肤文件夹中的模板

 site.com/skin/frontend/developer/template/js/navigation.js

默认标记表示它将通过整个站点加载。