。點擊li加上鍊接重定向事件

Question

我不是程序員，只知道很多css和html，但幾乎沒有javascript。我試圖實現一個我發現的免費菜單（感謝stu nichols），但我遇到了一個我認爲是jquery腳本的問題。我聯繫了設計師，但他無法提供幫助。

我將菜單輸入到jsfiddle。 http://jsfiddle.net/3vAaN/

HTML：

<ul class="leftnav1"> 
     <li>tier1 
      <ul> 
       <li><a href="#url">t1 s1</a></li> 
       <li><a href="#url">t1 s2</a></li> 
       <li><a href="#url">t1 s3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">tier2</a> 
      <ul> 
       <li><a href="#url">t2 s1</a></li> 
       <li><a href="#url">t2 s2</a></li> 
       <li><a href="#url">t2 s3</a></li> 
       <li><a href="#url">t2 s4</a></li> 
       <li><a href="#url">t2 s5</a></li> 
      </ul> 
     </li> 
    </ul>​ 

CSS：

.leftnav1 { font: bold 15px/15px arial, sans-serif; text-align: center; border: 5px solid #400; } 
.leftnav1 {background:#600; width:180px; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); 
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); 
} 
.leftnav1 ul {background:#700; width:170px; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); 
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); 
} 
.leftnav1 ul ul {background:#800; width:160px; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); 
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); 
} 
.leftnav1 ul ul ul {background:#900; width:150px; 
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); 
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); 
} 

.leftnav1 ul { display: none; } 

.leftnav1, .leftnav1 ul { padding: 10px 5px; margin: 0; list-style: none; -o-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); } 
.leftnav1 li a { color: #ddd; text-indent: 0; text-decoration: none; display:block; } 
.leftnav1 li { cursor: pointer; width: 100%; padding: 5px 0; } 
.leftnav1 li a:hover { color: #fff; } 
.leftnav1 li.has_ul { color: #fc0; } 
.leftnav1 li.has_ul:hover { color: #0cf; } 
.leftnav1 li.clicked { color: #0cf; } 

的JavaScript：

$(document).ready(function() { 
timer=0; 
/* time in milliseconds */ 
collapse = 10000; 

    $(".leftnav1 li:has(ul)").click(function (event) { 
     if (this == event.target) { 
      $(this).toggleClass('clicked').children('ul').slideToggle(); 
      $(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp(); 
      $(this).siblings().removeClass('clicked').find("ul").slideUp(); 
     } 
    }).addClass('has_ul'); 

    $(".leftnav1").mouseover(function() { 
     clearTimeout(timer); 
     }); 

    $(".leftnav1").mouseleave(function() { 
      timer = window.setTimeout(function(){ 
       $('.leftnav1 li > a').siblings().children().removeClass('clicked').find('ul').slideUp(); 
       $('.leftnav1 li > a').parent().siblings().removeClass('clicked').find('ul').slideUp(); 
      }, collapse); 
     }); 

}); 

如果您查看菜單，滑動在第一層上正常工作，因爲它不包含li中的鏈接。 在第2層上，我在li內添加了一個鏈接，該鏈接也有一個子目錄ul。只有在點擊li區域的頂端時，滑動才起作用。整體上不在li地區。我的猜測是，如果單擊單詞上的任意位置，不允許腳本中的滑動功能觸發，則鏈接會觸發，反之亦然。

我試過display:block在每個可能的類可能解決它，它沒有。有可能jQuery不能同時啓動一個函數和鏈接？菜單的實現將位於電子商務網站的靜態左側欄中，鏈接將位於加載到內部頁面區域的網站內的類別。

Answer 1

重寫單擊鏈接時觸發的功能（<a>）。在事件處理結束後，請務必包括return false或使用preventDefault()

見http://api.jquery.com/event.preventDefault/