如何使用「document.location.href」與在同一元素有一個按鈕，不激活它

Question

（我工作的移動響應網站）

這是列表：

HTML：

    <li url="http://google.com" class="mainli">NFL 
         <img src="strokesmenu.png" class="sub-menu" /> 
         <ul class="sports2"> 
          <li>Superbowl </li> 
         </ul> 
        </li> 

        <li url="http://google.com" class="mainli">MLB Baseball 
         <img src="strokesmenu.jpg" class="sub-menu" /> 
         <ul class="sports2"> 
          <li>Playoff </li> 
         </ul> 
        </li> 
       <li class="mainli"> NBA 
        <img src="strokesmenu.jpg" class="sub-menu" /> 
        <ul class="sports2"> 
         <a href="#" class="selected"><li>Finals Playoff </li></a> 
        </ul> 
       </li> 
       <li class="mainli"> College Basketball 
        <img src="strokesmenu.jpg" class="sub-menu" /> 
        <ul class="sports2"> 
         <a href="#" class="selected"><li>March Madness </li></a> 
        </ul> 
       </li> 
       <li > Boxing </li> 
       <li> College Football </li> 
       <li class="mainli"> Golf 
        <img src="strokesmenu.jpg" class="sub-menu" /> 
        <ul class="sports2"> 
         <a href="#" class="selected"><li>British Open</li></a> 
         <a href="#" class="selected"><li>Masters</li></a> 
         <a href="#" class="selected"><li>PGA Championship</li></a> 
         <a href="#" class="selected"><li>US Open</li></a> 
        </ul> 
       </li> 
       <li class="mainli"> NHL 
        <img src="strokesmenu.jpg" class="sub-menu" /> 
        <ul class="sports2"> 
         <a href="#" class="selected"><li>Stanley Cup </li></a> 
        </ul> 
       </li> 
       <li> MMA </li> 
       <li> UFC </li> 
       <li> Soccer </li> 
       <li> Tennis </li> 
       <li class="mainli"> Horse Racing 
        <img src="strokesmenu.jpg" class="sub-menu" /> 
        <ul class="sports2"> 
         <li>Belmont Stakes</li> 
         <li>Kentucky Derby</li> 
         <li>Preakness Stakes</li> 
        </ul> 
       </li> 
       <li> Other Sports </li> 
      </ul> 
     </div> 

而且這些少數的onClick jQuery的行：

//first 
$('.sub-menu').click(function(){ 
     //$('.sports2').slideToggle("slow"); 
     $(this).parent().find('.sports2').slideToggle("slow"); 
    }) 



//second 
    $("li").click(function(){ 
     document.location.href = $(this).attr('url'); 
    }); 

「NfL」本身就是一個鏈接 - 但是如果按＃子菜單按鈕，您可以使用更多的鏈接類別。適用於我的html中的所有<li>。

如果我評論第二個jQuery部分 - 它打開第二個列表（子類別.sports2）。但鏈接不起作用。

如果我評論第一個jQuery代碼 - 我得到的鏈接工作完美，但子菜單不打開。

如何混合兩種不混合的東西？

我試圖在取消他們兩個 - 我得到的鏈接工作正常，但是當我點擊#submenu按鈕，它擴展了一秒鐘，立即重定向至<li url="...">

Answer 1

嘗試的鏈接，以避免在不同的環節水平。 （至極水平將觸發？立頂層或鋰最低水平？）

Instaid觸發對所有鋰也是你的頂層你的鏈接時，請嘗試使用它與類參考像你這樣的'鋰.SUB菜單」

Answer 2

當你點擊一個鏈接或.sub-menu<li>標籤裏面你也可以點擊該li本身（看一下例子http://jsfiddle.net/op02x1qn/，並嘗試單擊鏈接）

這樣的一個選項是獲取您想要點擊的項目的點擊事件。你可以用你的文字li像這裏面的（和風格它的CSS是父元素等的全寬）：

<li class="mainli"> 
    <span class="mainli-text" data-url="http://google.com">NFL</span> 
    <img src="strokesmenu.png" class="sub-menu" /> 
    <ul class="sports2"> 
    <li>Superbowl </li> 
    </ul> 
</li> 

和JS：

$('.mainli-text').on('click',function(e){ 
    document.location.href = $(this).data('url'); 
}); 

所以，現在當你點擊的東西除了父li中新的span.mainli-text以外，它將擁有自己的點擊事件。