jQuery 쇼/숨기기 토글

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

  •  10-07-2019
  •  | 
  •  

문제

링크가 '이 페이지에 더 많은 추가'및 '설정 위치'슬라이드를 열고 관련 컨텐츠를 표시하는 BBC 홈페이지에 표시된 효과를 재현하려고합니다. '이 페이지에 더 추가'를 선택하면 슬라이드가 '추가'섹션을 엽니 다. '이 페이지에 더 추가'를 선택하면 다시 '추가'섹션을 닫습니다. 그러나 '추가'섹션이 열려 있고 '위치 설정'을 선택하면 '설정 위치'를 미끄러지기 전에 '추가'섹션을 미끄러 뜨립니다.

다음 코드를 사용 하여이 효과를 재현했습니다.

HTML

    <ul id="demo">
        <li><a href="#sectionOne">Link One <span class="rm">this site</span></a></li>
        <li><a href="#sectionTwo">Link Two</a></li>
        <li><a href="#sectionThree">Link Three</a></li>                 
    </ul>

    <div id="siteCustomisation">
        <div class="siteSelection" id="sectionOne">
            <h3>Section One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue tincidunt tortor, id condimentum massa scelerisque id. Cras elit magna, posuere at sollicitudin in, tristique nec turpis.</p>
        </div>
        <div class="siteSelection" id="sectionTwo">
            <h3>Section Two</h3>
            <p>Maecenas condimentum tincidunt pretium. Ut est ipsum, pharetra quis congue eu, eleifend vitae velit. Vestibulum quam purus, posuere quis vehicula ut, sollicitudin vel urna.</p>
        </div>
        <div class="siteSelection" id="sectionThree">
            <h3>Section Three</h3>
            <p>Nulla id nisi eget urna gravida euismod. Mauris tempor, diam ullamcorper sagittis eleifend, urna mauris scelerisque massa, placerat sagittis massa augue nec purus.</p>
        </div>                                  
    </div>

jQuery 코드

$(function(){
    $("#siteCustomisation .siteSelection").hide();

    $("#demo li a").each(function(index) {
        $(this).click(function() {  
            var id = $(this).attr('href');
            var $thisDiv = $(id);

            if ($thisDiv.siblings(':visible').length) { 
                $thisDiv.siblings(':visible').slideUp(700, function() {
                    $thisDiv.slideDown();
                });
            } else {    
                $thisDiv.slideToggle();         
            }
            return false;
        });
    });     
});

문제는 누군가가 링크를 클릭하면 두 개의 div를 빠르게 링크 한 다음 두 개의 div가 페이지에 표시됩니다. 항상 하나의 섹션 만 표시되어야합니다. 이 문제를 해결할 수있는 방법이 있습니까?

도와 주셔서 감사합니다.

도움이 되었습니까?

해결책

당신을위한 빠른 데모 여기. 기본적으로 다음을 사용하여 다음 슬라이드 타운과 함께 진행하기 전에 DIV 중 하나가 애니메이션이 있는지 테스트 할 수 있습니다.

또한 .live를 사용하는 방식을 기록하십시오. 동일한 이벤트 핸들러를 여러 요소에 첨부하는 것보다 바람직합니다.

NB는 CSS의 부족에 이르기 때문에 텍스트 점프를 무시합니다.

다른 팁

슬라이딩을 시작할 때 클릭 이벤트를 비활성화하고 슬라이딩이 완료되면 다시 활성화 할 수 있습니다. 더 쉽게도 글로벌 변수를 "잠금"으로 사용할 수 있습니다. 슬라이딩이 시작될 때 false로 설정하고 끝날 때 true로 다시 설정하십시오. 변수가 False 일 때 DIV에 대한 슬라이딩을 허용하지 마십시오. 모든 애니메이션에 콜백을 사용해야합니다.

다음과 같은 것을 사용할 수 있습니다.

animationStarted = true;
$thisDiv.slideToggle(function() {   
   animationStarted = false; 
});

모든 "애니메이션"메소드 (SlideToggle, SlideDown)는 콜백 함수를 인수로 수락하며, 이는 수행 효과가 완료 될 때 호출됩니다.

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