Question

我正在使用具有此基本结构的菜单：

<ul id="nav">
 <li><a href="index.php?location=home" id="home_link">HOME</a></li>
 <li id="movies_link_li"><a href="#" class="movies_link">MOVIES</a>
  <ul id="movies_submenu">
   <li><a href="#" id="insert_movie_link">Insert movie</a></li>   
   <li><a href="#" id="movie_images_link">Movie images</a></li>
   <li><a href="#" id="random_movie_link">Random movie</a></li>
  </ul>
 </li>
</ul>

......和这样的css：

.current {background: #FFFFFF;}

然后我使用jquery和ajax转到我网站的不同页面，如下所示：

<script type="text/javascript" language="javascript">
$.ajaxSetup({cache: false});

$(document).ready(function()
{       
    $(".movies_link").click(function(event){
        $("#conteudo").load("applet_movies.php",{'size':"fullscreen"});
        $('li').removeClass('current');$('#movies_link_li').addClass('current');
        $('#movie_images_link').removeClass('current');
        }); 
});
</script>

我可以在点击的菜单项上设置“current”类，但是在IE（版本8）上，点击的“li”下的所有“li”都继承了同一个类，这会混淆菜单。其他浏览器都没有这样做。

有没有办法阻止IE将“当前”类设置为点击的“li”下的所有“li”？

我刚试过其他方法，但都没有用：

$(".movies_link").click(function(event){
        $("#conteudo").load("applet_movies.php",{'size':"fullscreen"});
        $('li').removeClass('current');
        $('#movies_link_li').addClass('current');
        $('#movie_images_link').removeClass(); //jquery remove all classes from element, didn't work.
        $('#movies_link_li').children().removeClass('current'); //nothing...
        $('#random_movie_link').removeClass('current'); //also nothing...
        $('#movie_images_link').addClass('normalmenuitem'); //explicitly set another class / override - also nothing happened! :(
});

Answer 1

尝试将event.stopPropagation()添加到click处理程序。

$(".movies_link").click(function(event){
  event.stopPropagation();
  //...
});

李里面里面的李

1 个答案: