jQuery를 사용하여 한 번에 하나의 항목을 전환하십시오.

Question

일련의 div가 숨겨져 있고 개별적으로 표시 여부를 전환 할 수 있기를 원합니다.

html로 :

 <h2>Section One</h2> 
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p> 
    <input type="button" class="show-video" value="Video" /> 
    <div class="video-holder"></div> 

    <h2>Section Two</h2> 
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p> 
    <input type="button" class="show-video" value="Video" /> 
    <div class="video-holder"></div> 

    <h2>Section Three</h2> 
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p> 
    <input type="button" class="show-video" value="Video" /> 
    <div class="video-holder"></div> 

JQuery와는 :

<script type="text/javascript"> 
    $(document).ready (function() { 
    $('.video-holder').hide(); 
    $('.show-video').click(function() { 
    $('.video-holder').toggle('slow'); 
    }); 
    }); 
</script> 

나는 한 번에 하나씩 전환하도록하는 방법을 몇 가지 도움을 주셔서 감사합니다.

감사합니다.

Answer 1

는 여기에 약간의 트릭입니다.

Answer 2

jquery UI의 accordion과 같은 소리가납니다.

<script type="text/javascript">//<!-- 

    $(document).ready (function() { 
    $('.video-holder').hide(); 
    var i = 0; 
    $('.show-video').each(function(){ 
     $(this).click(function(){ 
      $('.video-holder:eq('+$(this).data('idf')+')').toggle('slow'); 
     }); 
     $(this).data('idf',i); 
     i++; 
    }); 
    }); 

// --></script> 

그래서 데이터의 사용을 만든다 :

Answer 3

문제는 jQuery가 유용하며 사용자가 video-holder 클래스를 사용하여 모든 요소를 ​​토글하고 싶다고 가정합니다. 당신이 $('.video-holder').hide();와 모든 비디오 홀더를 숨길 때 (당신은 그 가정 이전을 사용한다.

당신이 jQuery의 next() 기능을 사용하려면 다음을 다음 비디오 만 즉시 보여 각 .show-video 요소를 바인딩합니다. 그래서 코드는 것 다음과 같이 :....!.

$('.video-holder').hide(); 
$('.show-video').click(function() { 
    $(this).next('.video-holder').toggle('slow'); 
    /* 'this' contains the javascript object where the click occurred. 
     We wrap it in a jQuery object and then execute our functions on it */ 
});