Простой Toggle (JQuery) не работает

Question

У меня есть тег span; Я хочу, чтобы у него была опция переключения. Я пытался использовать JQuery, но он не работает.

Вот мой код:

   <li class ="span2"><span id="test">Click here</span> 
        <ul class ="dropDown" id="idGraphic" style="display: none;"> 
         <li class ="span1" id ="photoAbout"> 
          <?php 
           echo anchor(LINK_GRAPHIC_ABOUT, 'About', array('style' => 'color:white;')); 
          ?> 
         </li> 
         <li class ="span1" id ="photoGallery"> 
          <?php         
           echo anchor(LINK_GRAPHIC_GALLERY, 'Gallery', array('class' => $hover, 'style' => 'color:white;'));                         
          ?> 
         </li> 
        </ul> 
       </li> 

и мой код Javascript является:

$("#test").click(function() { 
    $("#idGraphic").toggle(); 
}); 

Поэтому, когда я нажимаю на пролете с идентификатором = тест Предполагается, чтобы показать два ULS!

Пожалуйста, дайте мне знать, если мой код и мое объяснение ясны или нет; если нет, пожалуйста, дайте мне знать, в какой части вам нужно больше разъяснений.

Благодаря

Answer 1

Я не вижу ничего плохого в вашем коде. Я подозреваю, что PHP генерирует пустые данные, и вы ничего не видите в результате этого

Answer 2

тумблер устарела .. Вы должны проверить видимость и установить его в любом показать или скрыть ..

if ($(this).is(':visible')) { $(this).hide() } 
else { $(this).show()); } 

Answer 3

Оригинал HTML: ->

<li class ="span2"> 
    <span id="test">Click here</span> 
    <ul class ="dropDown" id="idGraphic" style="display: none;"> 
     <li class ="span1" id ="photoAbout"> 
     <?php 
      echo anchor(LINK_GRAPHIC_ABOUT, 'About', array('style' => 'color:white;')); 
     ?> 
     </li> 
     <li class ="span1" id ="photoGallery"> 
     <?php         
      echo anchor(LINK_GRAPHIC_GALLERY, 'Gallery', array('class' => $hover, 'style' => 'color:white;'));                         
     ?> 
     </li> 
    </ul> 
</li> 

Оригинал Javascript: ->

$("#test").click(function() { 
    $("#idGraphic").toggle(); 
}); 

Edited Javascript: ->

<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#test').click(function() { 
      $('#idGraphic').toggle(); 
     }); 
    }); 
</script> 

Место отредактированный код яваскрипта после того, как в конце тега закрытия тела. Я думаю, вы поместили его в тег заголовка, и именно по этой причине ваш код jQuery выполняется, пока страница не загрузится полностью. Надеюсь, что это помогает вам.