簡單切換（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();
});

因此，每當我單擊id = test的span時，都應該顯示兩個UL！

請讓我知道我的代碼和解釋是否清楚； 如果沒有，請告訴我您需要進一步澄清。

謝謝

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();
});

編輯的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>

將已編輯的javascript代碼放在結束body標記的末尾。 我猜您已經將其放在head標簽中，這就是在頁面完全加載之前執行jQuery代碼的原因。 希望這可以幫助你。