javascript显示和隐藏div元素

StackOverflow https://stackoverflow.com//questions/20051140

题

我是 Javascript 新手，目前有一篇文章正在从数据库中获取，该文章有两行。 标题 & 内容 我的数据库中大约有 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 来截断。

这意味着，内容应该只可见一次，然后当您单击另一个标题时，之前打开的内容应该消失，只显示新内容。

我希望这是有道理的。因为我缺乏语法来解释这一切。我试图在这里给出一个小例子，由于某种原因，它似乎根本不起作用，但在我的本地主机中却起作用 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'>
有帮助吗？

解决方案

您只需记住可见的最后一个项目：

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

请记住，此解决方案以无可见的项目始于，之后只允许一次可见一个项目。

其他提示

你应该尝试这个：

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

我还看到你将有多个元素 id=title, ， 你 必须 更改它以使每个元素都独一无二。

你可以通过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';
}
.

我是javascript和jquery的新手，但我们刚刚在课堂上所做的一件事是手风琴展示，您可以在文档中附加事件处理程序.Ready的Click事件标题对象和他们的div儿童元素，它是通过在点击事件上交换CSS类......您是否使用CSS？在我们的版本中，随时我们点击了一个加号，它会扩展显示屏以显示下面的div，并单击减号，它将关闭它们......我们为所有这些都做了它，但你应该能够代码代码甚至“关闭”所有这些显示，然后打开/显示单击该项目的儿童的div ......是您正在寻找的？

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top