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