我试图通过将以下内容放入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?还是有另一种方法可以做到这一点?还是我只是在解决这个完全错误的问题。

最佳答案

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

关于javascript - Magento菜单上的自定义JavaScript,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40116582/

10-12 12:24
查看更多