使子div在点击时可见

Question

编辑我的代码以使其正常工作。

编辑为最新版本。

这是我所拥有的：

<body>
<!-- visibility toggle -->
<script type="text/javascript">
<!--
function toggle_visibility()
    {
       if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
            document.getElementById(window.event.srcElement.id+'menu').style.display='none';
        }
        else{ 
            document.getElementById(window.event.srcElement.id+'menu').style.display='block';
        }
    };
//-->
</script>

这是我的div（经过编辑以准确显示我的财产）

<ul class="lyrics"><h3>ALL LYRICS</h3>
    <?php while ( have_posts() ) : the_post(); ?>   
        <li ><a id="links" href="#" onclick="toggle_visibility();"><?php the_title(); ?></a>
            <div id="linksmenu"><?php the_content();?></div>
        </li>
    <?php endwhile; // End the loop. Whew. ?>
</ul>

这是发生的情况：无论我单击哪个链接，仅显示与最后一个“ the_content”关联的文本。

这是我需要的：最初所有“子” div都不可见。 当我单击“标题1”链接时，“子文本1”将变为可见。 当我单击“标题2”链接时，“子文本2”将变为可见，而“子文本1”将变为不可见。

这将在WordPress博客中，因此Title div的数量将改变。 永远只有一个孩子。

提前致谢！

Answer 1

这样做是因为您两次调用the_content() 。 我假设您的文件如下所示：

<?php get_header();
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<ul> 
<li class="main"><a href="#" title="Title 1"><?php the_title(); ?></a>   <div class="child"><?php the_content(); ?></div> </li> 
<li class="main"><a href="#" title="Title 2"><?php the_title(); ?></a>   <div class="child"><?php the_content(); ?></div> </li>  <ul> 
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

您需要有两个循环，但是如果看不到更多代码，我将无法提供详细信息。 了解有关多个循环的信息。

Answer 2

无论您在何处单击，都将切换第一个div的原因是因为您使用了硬编码的id foo 。 通过this来toggle_visibility ，而不是字面的'foo'和内部toggle_visibility功能找到您要切换div（这将是传递的参数的第一个孩子）。

Answer 3

抛弃该参数，并使用触发事件的元素的ID来构建要设置为可见/不可见的ID。

 function toggle_visibility()
        {
            if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){
                document.getElementById(window.event.srcElement.id+'menu').style.display='none';
            }
            else{ 
                document.getElementById(window.event.srcElement.id+'menu').style.display='block';
            }
        };

只要您要显示的内容始终带有id +'menu'或其他内容，您就可以使用函数显示它。 （请注意，父级具有id links ，子级具有id linksmenu ）

<ul class="lyrics"><h3>ALL LYRICS</h3>
    <?php while ( have_posts() ) : the_post(); ?>   
    <li ><a id="links" href="#" onclick="toggle_visibility();"><?php the_title(); ?></a>
      <div id="linksmenu"><?php the_content();?></div>
    </li>
    <?php endwhile; // End the loop. Whew. ?>
</ul>

使子div在点击时可见

问题描述

3 个解决方案

解决方案1
0 2012-06-28 13:58:47

解决方案2
0 已采纳 2012-06-28 15:04:23

解决方案3
0 2012-06-28 15:09:32

使子div在点击时可见

问题描述

3 个解决方案

解决方案1 0 2012-06-28 13:58:47

解决方案2 0 已采纳 2012-06-28 15:04:23

解决方案3 0 2012-06-28 15:09:32

解决方案1
0 2012-06-28 13:58:47

解决方案2
0 已采纳 2012-06-28 15:04:23

解决方案3
0 2012-06-28 15:09:32