자바스크립트 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 } ?>

콘텐츠 표시를 숨기는 자바스크립트는 다음과 같습니다. 

<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, 너 ~ 해야 하다 모든 요소를 ​​독특하게 만들기 위해 변경하세요.

"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를 처음 접했지만 제가 수강하는 수업에서 방금 수행한 작업 중 하나는 아코디언 디스플레이였습니다. 여기서는 헤더 개체에 대한 클릭 이벤트에 대해 document.ready에 이벤트 핸들러를 연결합니다. 그리고 해당 div 하위 요소를 클릭 이벤트에서 CSS 클래스를 교체하여 수행했습니다.당신은 CSS를 사용하고 있습니까?우리 버전에서는 플러스를 클릭할 때마다 디스플레이가 확장되어 아래 div가 표시되고 마이너스 그림을 클릭하면 해당 div가 닫힙니다.우리는 모든 항목에 대해 해당 작업을 수행했지만 해당 디스플레이를 모두 "닫고" 클릭한 항목의 하위 div만 열거나 표시하도록 코딩할 수 있어야 합니다.그게 당신이 찾고 있는 거예요?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top