Javascript 简单切换(Jquery)不起作用

Javascript 简单切换(Jquery)不起作用,javascript,jquery,Javascript,Jquery,我有一个span标签;我想有一个切换选项。我尝试使用JQuery,但它不起作用 这是我的密码: <li class ="span2"><span id="test">Click here</span> <ul class ="dropDown" id="idGraphic" style="display: none;"> &

我有一个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>
因此,每当我单击id=test的span时,它应该显示两个ul

请让我知道我的代码和解释是否清晰;如果没有,请让我知道你需要更多澄清的部分


谢谢,切换已被弃用。。您应该检查可见性并将其设置为“显示”或“隐藏”

if ($(this).is(':visible')) { $(this).hide() }
else { $(this).show()); }
原始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();
});
<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>

$(文档).ready(函数(){
$(“#测试”)。单击(函数(){
$('#idGraphic').toggle();
});
});

将编辑的javascript代码放在结束正文标记的末尾。我猜您已经将它放在了head标记中,这就是jQuery代码在页面完全加载之前被执行的原因。希望这对您有所帮助。

我看不出您的代码有任何错误。我怀疑PHP正在生成空白数据,因此您看不到任何内容

您是否在dom就绪的handlerworks中添加了脚本(此处
:)
在我看来很好…浏览器控制台中是否有任何错误。。。还有,元素是否是动态创建的!但仍然无法工作…请显示不推荐使用切换的位置。切换(函数,函数)是的,但不是我猜的隐藏/显示版本,而不是“this”,你的意思是“#idGraphic”;但是这个也不行!不,您不能将脚本放在结束正文标记之后。有了这么多的脚本,您就可以将其放在头部和文档中。ready在页面加载后执行。这只是说明给出完整的故事有多大帮助。下次只需先查看源代码并粘贴呈现的HTML
<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>