javascript顯示和隱藏div元素

Question

我是Java語言的新手，目前有一篇文章是從數據庫中獲取的，該文章有兩行。 標題和內容我的數據庫中大約有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'> 

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

您可以單擊“ 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還是很陌生，但是我們在我正在學習的類中所做的一件事就是手風琴顯示，您可以在其中附加事件處理程序到文檔中。准備好標題對象的click事件，以及它們的div子元素，這是通過在click事件上交換css類來完成的...您是否使用css？ 在我們的版本中，每當我們單擊加號時，它將擴大顯示范圍以顯示下面的div，然后單擊減號圖片將其關閉...我們為所有這些做到了，但是您應該可以對它進行編碼甚至“關閉”所有這些顯示，然后僅打開/顯示作為所單擊項目子項的div ...這就是您要查找的內容嗎？