0

我有一个跨度标签；我想要一个切换选项。我尝试使用 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！

请让我知道我的代码和我的解释是否清楚；如果不是，请让我知道您需要更多澄清的部分。

谢谢

4

3 回答 3

1

我看不出你的代码有什么问题。我怀疑 PHP 正在生成空白数据，因此您没有看到任何结果

于 2013-10-13T06:52:01.370 回答
-1

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

if ($(this).is(':visible')) { $(this).hide() }
else { $(this).show()); }
于 2013-10-13T06:21:50.993 回答
-1

原始 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 代码在页面完全加载之前被执行的原因。希望这可以帮助你。

于 2013-10-13T06:48:25.597 回答