Fatal编程技术网
  • javascript/
  • Javascript 使子div在单击时可见

Javascript 使子div在单击时可见

javascript wordpress

Javascript 使子div在单击时可见,javascript,wordpress,Javascript,Wordpress,请编辑我的代码使其工作 为最新版本编辑 以下是我所拥有的： <body> <!-- visibility toggle --> <script type="text/javascript"> <!-- function toggle_visibility() { if(document.getElementById(window.event.srcElement.id+'menu').style.display=='block'){

请编辑我的代码使其工作

为最新版本编辑

以下是我所拥有的：

<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（经过编辑以准确显示我拥有的内容）

    所有歌词

  • 

    •
发生的情况如下： 无论我点击哪个链接，都只会显示与最后一个“the_content”关联的文本

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

这将出现在WordPress博客中，因此标题div的数量将发生变化。永远只有一个孩子

提前谢谢

之所以这样做，是因为您调用了两次
内容（）。我假设您的文件看起来像：


<?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; ?>





    

  • 

    • 

      



你需要有两个循环，但我不能提供细节而不看更多的代码。阅读。
无论您在何处单击，都会切换第一个
div
，这是因为您使用了硬编码id
foo
。将
this
传递到
toggle\u visibility
而不是文本
'foo'
，并在
toggle\u visibility
函数中查找要切换的div（这将是传递参数的第一个子项）.
丢弃该参数，并使用触发事件的元素的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+“菜单”或其他什么，你就可以用这个函数来显示它。（请注意，父项具有id
链接，子项具有id
linksmenu
）


    所有歌词

  • 

    • 



在哪里调用
切换可见性
功能？i、 例如，您的事件处理程序在哪里？我们需要查看PHP函数的输出以确定问题。您希望我们为您编写和调试代码，还是有具体问题？谢谢您的回答。我在原始帖子中添加了添加信息。无论单击哪个链接，上面的代码只显示最后一个“linksmenu”文本。例如：我有链接1，链接2，如果我点击链接1，我得到链接1文本，如果我点击链接2，我得到链接1文本。你有链接1菜单，链接2菜单等等吗？

 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';
            }
        };



<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>