버튼 클래스 및 드롭 다운 동기화

내 버튼 작동 방식에 문제가 있습니다. 이를 클릭하면 버튼이 클래스에 추가되고 드롭 다운이 나타납니다. 그 부분은 괜찮아. 누군가가 클릭을 매우 빠르게 스팸하면 버튼 클래스와 드롭 다운이 동기화되지 않을 수 있습니다. 버튼에 클래스가 없지만 드롭 다운이 표시되거나 드롭 다운이 표시되지 않고 버튼에 클래스가있는 경우입니다. 버튼 클래스 및 드롭 다운 동기화

아무도 해결책을 가지고 있습니까

   <ul> 
       <li><a class="drop" tabindex="1"></a> 
        <ul class="dropdown"> 
         <li></li> 
         <li></li> 
        </ul> 
       </li> 
      </ul>

.dropdown { 
    display: none; 
}

다음 내 CSS입니다 다음 내 jQuery를

jQuery(".drop").click(function(event) { 

     // Variables 
     var theDrop = jQuery(this).next("ul.dropdown"); 
     theDropState = theDrop.is(':visible'); 
     // Slide Mechanism 
     jQuery("ul.dropdown").stop().slideUp(200); 
     if(!theDropState){ 
      theDrop.stop().animate({ height: 'show', opacity: 'show' }, '600') 
     } 
    }); 

    jQuery(".drop").click(function() { 
     theClickState = jQuery(this).hasClass("open") 
     jQuery(".drop").removeClass("open"); 
     if(theClickState){ 
       jQuery(this).removeClass("open") 
     } 
     if(!theClickState){ 
      jQuery(this).addClass("open") 
     } 
    });

내 HTML입니다 버튼 클래스와 드롭 다운이 동기화 상태로 유지됩니까?

감사합니다.

출처

2012-08-16 user1032775

버튼에 클릭 이벤트를 두 번 바인딩하지 마십시오. 첫 번째 블록에 두 번째 블록의 코드를 넣습니다. 그렇게 :

jQuery(".drop").click(function(event) { 
    // Variables 
    var theDrop = jQuery(this).next("ul.dropdown"); 
    theDropState = theDrop.is(':visible'); 
    // Slide Mechanism 
    jQuery("ul.dropdown").stop().slideUp(200); 
    if(!theDropState){ 
     theDrop.stop().animate({ height: 'show', opacity: 'show' }, '600') 
    } 
    //the second block 
    theClickState = jQuery(this).hasClass("open") 
    jQuery(".drop").removeClass("open"); 
    if(theClickState){ 
      jQuery(this).removeClass("open") 
    } 
    if(!theClickState){ 
     jQuery(this).addClass("open") 
    } 
});

출처

2012-08-16 07:23:51 Dirk

안녕하세요, 응답 해 주셔서 감사합니다. 이 방법을 사용하면 훨씬 효과적 이었지만, 더 빨리 열 수는 있었지만 여전히 충분히 빠를 수있었습니다. – user1032775

나는 이벤트에 넥타이 변수의 재사용에 의해, 그것을 해결하기 위해 관리했다.

내가 대신

if(theClickState){ 
     jQuery(this).removeClass("open") 
    } 
    if(!theClickState){ 
     jQuery(this).addClass("open") 
    }

의

if(theClickState){ 
     jQuery(this).removeClass("open") 
    } 

    else if(!theDropState){ 
     jQuery(this).addClass("open") 
    }

했다 이상한 스크립트의 비트를 보인다, 그러나 그것은 작동, 그래서 난 행복 해요!

출처

2012-08-16 07:34:48 user1032775

버튼 클래스 및 드롭 다운 동기화

답변

관련 문제