Question

我是Javascript的新手，我目前有一篇文章正在从数据库中提取，文章有两行。标题＆amp; 内容我的数据库中大约有100个。现在的目标是首先列出所有标题，当用户点击标题时，使相关内容显示在其下方。但是我可以这样做。

<?php
//mysql query here...
foreach($result as $row) { ?>
<div id='title'> <?= $row['title'] ?> </div>
<div id='<?= $row['id'] ?>' style='display:none' 
             onclick=showContent(<?= $row['id'] ?>) > <?= $row['content'] ?> 
</div>
<?php } ?>

隐藏节目的javascript内容是这样的：

<script type='text/javascript'>
function showContent(id){
    document.getElementById(id).style.display='inline';
}
</script>

showContent()函数根据通过参数的id隐藏div。但是，唯一的问题是，我需要其他先前显示的div来打开新的div。

意思是，内容应该只显示一次，然后当您点击另一个标题时，之前打开的内容应该消失，只显示新内容。

我希望这是有道理的。因为我缺乏语法来解释这一切。我试图在这里给出一个小例子，由于某种原因，它似乎根本不起作用，但在我的localhost中http://jsfiddle.net/YL6aH/

已编辑：

我的完整PHP循环，一起将所有js / html

    <?php 
            $articlesForPreview = $createQuery
                ->query("SELECT * FROM timeline");              
                $fetchAll = $articlesForPreview->fetchAll(PDO::FETCH_ASSOC);    
                foreach($fetchAll as $row) {?>
                <div id='timeline_container'>
                <span class='timeline_date'> <?= $row['time'] ?></span>
                <span class='timeline_title'> <a href='#' onclick=timeline(<?= $row['id'] ?>)><?= $row['title'] ?></a></span>
                <p id='<?= $row['id'] ?>' style='display:none;'> <?= $row['event'] ?></a></span>
            </div>

            <?php }?>



    </aside>
</section>

<script type='text/javascript'>
function timeline(id){
    document.getElementById(id).style.display='inline';
}
</script>

<footer id='footer_container'>

Answer 1

你应该试试这个：

function showContent(id){
    $('.active').hide().removeClass('active');
    $('#'+id).show().addClass('active');
}

我还看到您将使用id=title多个元素，必须更改它以使每个元素都是唯一的。

Answer 2

您可以简单地记住可见的最后一项：

var active;
function showContent(id){
    if (active) active.style.display = 'none'; // hide previously visible element
    active = document.getElementById(id);    // keep track of the element you are about to show
    active.style.display='inline'; // show the new element
}

请注意，此解决方案从没有可见的项目开始，之后只允许一次显示一个项目。

Answer 3

你可以通过onclick“showContent”查看所有元素，将它们全部隐藏起来，然后你就可以显示你想要的那个。

function showContent(id){
    var allElements = document.getElementsByTagName('*');
    for ( var i = 0; i<allElements.length; i++ ) {    
        if ( (allElements[i].onclick + "").indexOf("showContent") >= 0) {
            allElements[i].style.display = "none";       
        }
    }
    document.getElementById(id).style.display='inline';
}

Answer 4

我自己对javascript和jquery都很陌生，但我在课堂上做的其中一件事就是手风琴显示，你可以在文档中附加事件处理程序。标题对象及其div子元素，它是通过在点击事件上交换css类来完成的...你使用css吗？在我们的版本中，只要我们点击一个加号，它会展开显示以显示下面的div，然后点击减去它会关闭它们...我们为所有这些做了它，但你应该能够编码甚至“关闭”所有这些显示，然后只打开/显示点击项目的子项的div ...是你要找的？

javascript显示和隐藏div元素

4 个答案: