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>

以下是发生的事情：无论我点击哪个链接，只有与最后一个＆＃34; the_content＆＃34;相关联的文本。显示器。

这是我需要的：最初所有＆＃34;孩子＆＃34; div不可见。当我点击＆＃34;标题1＆＃34;链接，＆＃34;儿童文本1＆＃34;将变得可见。当我点击＆＃34;标题2＆＃34;链接，儿童文本2＆＃34;将变得可见并且＆＃34; Child text 1＆＃34;将变得不可见。

这将在WordPress博客中，因此标题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; ?>

您需要有两个循环，但如果没有看到更多代码，我就无法提供详细信息。阅读multiple loops。

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'或者其他什么，你就可以用它来展示它。（请注意，父级的标识为links，且子级标识为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 个答案: