使子div在点击时可见
[英]Make a child div visible on click
问题描述
Edit my code to make it work please. 
编辑我的代码以使其正常工作。
Edited for latest version. 编辑为最新版本。
Here is what I have: 这是我所拥有的：
<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>
Here are my divs (edited to show exactly what I have) 这是我的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>
Here is what happens: Regardless which link I click on, only the text associated with the very last "the_content" displays. 这是发生的情况：无论我单击哪个链接，仅显示与最后一个“ the_content”关联的文本。
Here is what I need: Initially all the "child" divs are not visible. 这是我需要的：最初所有“子” div都不可见。 When I click on "Title 1" link, the "Child text 1" will become visible. 当我单击“标题1”链接时，“子文本1”将变为可见。 When I click on "Title 2" link, the "Child text 2" will become visible and the "Child text 1" will become not visible. 当我单击“标题2”链接时，“子文本2”将变为可见，而“子文本1”将变为不可见。
This is going to be in a WordPress blog so the number of Title divs will change. 这将在WordPress博客中，因此Title div的数量将改变。 There will always be only one child. 永远只有一个孩子。
Thanks in advance! 提前致谢！
3 个解决方案
解决方案1
0 2012-06-28 13:58:47
It is doing this because you are calling the_content() twice. 这样做是因为您两次调用the_content() 。 I am assuming your file looks like: 我假设您的文件如下所示：
<?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; ?>
You need to have two loops, but I can't supply detail without seeing more code. 您需要有两个循环，但是如果看不到更多代码，我将无法提供详细信息。 Read about multiple loops . 了解有关多个循环的信息 。
解决方案2
0 已采纳 2012-06-28 15:04:23
the reason why your first div is toggled no matter where you click, is because you use the hard-coded id foo . 无论您在何处单击，都将切换第一个div的原因是因为您使用了硬编码的id foo 。 Pass this to toggle_visibility instead of the literal 'foo' and inside toggle_visibility function find the div that you want to toggle (this is going to be the first child of the passed parameter). 通过this来toggle_visibility ，而不是字面的'foo'和内部toggle_visibility功能找到您要切换div（这将是传递的参数的第一个孩子）。
解决方案3
0 2012-06-28 15:09:32
Throw the parameter away and build the id you want to set visible/invisible using the id of the element which triggers the event. 抛弃该参数，并使用触发事件的元素的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';
}
};
And as long as the thing you want to show always has a id+'menu' or whatever, you can show it with the function. 只要您要显示的内容始终带有id +'menu'或其他内容，您就可以使用函数显示它。 (notice that the parent has id links and the child has id linksmenu ) （请注意，父级具有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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.