我已經做了一個手風琴菜單，但沒有子菜單的鏈接不工作

Question

我做了一個手風琴菜單，大多數情況下，一切都是隆重的。子菜單鏈接正在工作，滑動是盛大的。事情是，沒有子菜單的鏈接不工作。我有有下面的代碼片段一個js文件：

$(document).ready(function(){ 
$("#nav > li > a").on("click", function(e){ 
e.preventDefault();  
} 
if(!$(this).hasClass("open")) { 
    // hide any open menus and remove all other classes     
    // open our new menu and add the open class  
    $(this).next("ul").slideDown(350);  
    $(this).addClass("open");  
    }  
    else if($(this).hasClass("open")) {  
    $(this).removeClass("open");  
    $(this).next("ul").slideUp(350);  
    } 
    }); 
    }); 

正如你可以在上面看到它指出，如果一個家長有另一個孩子UL則阻止對該鏈接一個從開放，工作正常對於有子菜單的鏈接。然而你會認爲這樣做仍然可以讓沒有'ul'兄弟的鏈接工作，但它們不起作用。例如，「致電我們」不會去指定的頁面「open.htm」。我感謝任何幫助。謝謝。我的html：

<div id="content"> 

    <div> 
     <ul id="nav"> 
      <li><a href="#"><span class="block1"><img class="navicon" src="images/maps_30_white1.png" height="30" width="30" alt="Find Us" /><span class="button_desc">Find Us</span></span></a></li> 
      <li><a href="open.htm#">Call Us</a></li> 
      <li><a href="open.htm#"><span class="block1"><img class="navicon" src="images/clock_white1.png" height="30" width="30" alt="Opening Hours" /><span class="button_desc">Opening Hours</span></span></a></li> 
       <li><a href="#"><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Departments</span></span></a> 
        <ul> 
         <li><h4><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a></h4></li> 
         <li><h4><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a></h4></li> 
         <li><h4><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a></h4></li> 
         <li><h4><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a></h4></li> 
        </ul> 
       </li> 
       <li><a href="#"><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Brands</span></span></a> 
        <ul> 
         <li><h4><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a></h4></li> 
         <li><h4><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding & Logos</a></h4></li> 

        </ul> 
       </li> 
      <li><a href="#"><span class="block1"><img class="navicon" src="images/arrow_white.png" height="30" width="30" alt="Shop" /><span class="button_desc">Gift Ideas</span></span></a> 
        <ul> 
         <li><h4><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a></h4></li> 
         <li><h4><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding & Logos</a></h4></li> 
         <li><h4><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a></h4></li> 

        </ul> 
       </li> 
     </ul> 
    </div> 

</div> 

Answer 1

首先，如果文本代表子菜單（例如品牌），爲什麼它在一個錨標籤？如果你想顯示一個圖像和一些文字，你可以使用CSS或img標籤。 刪除UL標頭。

其次，您需要刪除e.preventDefault（）。這就是爲什麼你的單一​​鏈接不會進入下一頁。

樣本HTML：

<div id="content"> 
    <div> 
     <ul id="nav"> 
      <li><a href="www.google.com">Call Us</a> 
      </li> 
      <li><span class="block open">List Header</span> 

       <ul> 
        <li>List item 1</li> 
        <li>List item ...</li> 
        <li>List item n</li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS：

.block { 
    text-decoration: underline; 
} 

您的固定JS：

$(document).ready(function() { 
    $("#nav > li > .block").on("click", function (e) { 
     if (!$(this).hasClass("open")) { 
      // hide any open menus and remove all other classes     
      // open our new menu and add the open class  
      $(this).next("ul").slideDown(350); 
      $(this).addClass("open"); 
     } else if ($(this).hasClass("open")) { 
      $(this).removeClass("open"); 
      $(this).next("ul").slideUp(350); 
     } 
    }); 
}); 

現場演示/小提琴：

http://jsfiddle.net/tRDzr/1/