內里內里

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>

我可以在單擊的菜單項上設置“當前”類，但在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();
  //...
});