在Magento菜单上自定义javascript - Custom javascript on Magento menu

Custom javascript on Magento menu

我试图添加一个自定义java脚本文件到Magento通过放置以下到local.xml

<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后菜单已加载?或者是否有其他方法来实现这一点?还是我完全搞错了?

您可以使用$(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>

我认为问题是在路由在local.xml

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

注意(developer/template)是你的模板在皮肤文件夹

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

默认的标签意味着它将被加载到整个站点