Я сделал меню аккордеона, но ссылки, которые не имеют подменю, не работают

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» sibling, но они не работают. Например, «позвонить нам» не идет на указанную страницу «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/