javascript dropdown

Question

Я не уверен, что мне не хватает здесь. это код, который я поставил:

 <script type="text/javascript"> 
    $(function(){ 
     $(".category_list").hide(); return false; 
     $("#sol-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
     }); 
     $("#nat-stone").click(function() { 
      $(this).next().toggle(); 
      return false; 
     }); 
     $("#man-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
     }); 
    }); 

</script> 

и в то время как он скрывается подменю, оно также не подходит, когда я нажимаю на пункт - это то, что приходит, когда я смотрю на исходный код страницы:

<div class="cat_nav"> 
    <ul> 
     <li><a href="#" id="sol-surface">Solid Surface</a></li> 

     <li><a href="#" id="nat-stone">Natural Stone</a></li> 
     <li><a href="#" id="man-surface">Manufactured Surface</a></li> 
    </ul> 
    <div id="sub-nav"> 
    <ul class="category_list"> 
    <li><a href="http://www.metrostoneworks.com/products/?c=corian">Corian</a></li> 
</ul> 
    <ul class="category_list"> 

    <li><a href="http://www.metrostoneworks.com/products/?c=granite">Granite</a></li> 
    <li><a href="http://www.metrostoneworks.com/products/?c=silestone">Silestone</a></li> 
</ul> 
    <ul class="category_list"> 
    <li><a href="http://www.metrostoneworks.com/products/?c=zodiaq">Zodiaq</a></li> 
</ul> 
    </div> <!-- EO #sub-nav --> 
</div> <!-- EO .cat_nav --> 

, и я не знаю, почему я не могу войти в подменю ... спасибо

Answer 1

почему вы возвращение ложным сразу после того, как прячешься?

$(".category_list").hide(); return false; 

Это возвращение выходит из функции, в которой вы находитесь, и не связывает остальные элементы.

Кроме того, ваш HTML-код не соответствует требованиям вашего кода. Он должен выглядеть следующим образом:

<div class="cat_nav"> 
    <ul> 
    <li><a href="#" id="sol-surface">Solid Surface</a> 
     <ul class="category_list"> 
     <li><a href="http://www.metrostoneworks.com/products/?c=corian">Corian</a></li> 
     </ul> 
    </li> 
    <li><a href="#" id="nat-stone">Natural Stone</a> 
     <ul class="category_list"> 
     <li><a href="http://www.metrostoneworks.com/products/?c=granite">Granite</a></li> 
     <li><a href="http://www.metrostoneworks.com/products/?c=silestone">Silestone</a></li> 
     </ul> 
    </li> 
    <li><a href="#" id="man-surface">Manufactured Surface</a> 
     <ul class="category_list"> 
     <li><a href="http://www.metrostoneworks.com/products/?c=zodiaq">Zodiaq</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

После того, как ваш HTML выглядит следующим образом, вы можете заменить это:

$("#sol-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 
    $("#nat-stone").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 
    $("#man-surface").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 

с этим:

$("div.cat_nav > ul li a").click(function() { 
      $(this).next().toggle(); 
      return false; 
    }); 

Answer 2

Поскольку $(this).next() возвращает неопределенное значение во всех трех случаях , У ваших ссылок нет братьев и сестер.