.clickイベントと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エリア全体ではありません。私の推測では、単語のどこかをクリックするとリンクが起動し、スクリプト内のスライド機能を起動できないようにし、liエリアの先端をクリックするとリンクが起動すると考えられます。

解決できる可能性のあるすべてのクラスでdisplay:blockを試しましたが、それはありませんでした。 jqueryは関数を起動することはできず、同時にリンクをたどることはできないのでしょうか？メニューの実装は、eコマースサイトの静的な左側の列にあり、リンクは内側のページ領域に読み込まれるサイト内のカテゴリになります。

Answer 1

リンク（<a>）をクリックすると機能が書き換えられます。イベントハンドラの終了時に、必ずreturn falseを含めるかhttp://api.jquery.com/event.preventDefault/