클릭 기능에서 Jquery-toggle은 한 번의 클릭으로 작동하지 않습니다. 하지만 두 번 클릭하면 작동합니다

Question

안녕하세요, 토글 기능에 문제가 있습니다. 단 한 번의 클릭으로 두 번 클릭하면 작동하지 않으므로 아무에게도 도움이 될 수 있습니다. 내가 = "dropdownArrow"범위 ID를 클릭하면 UL를 전환 할

<div class="search_result_per_page"> 
    <dl class="selectcsdd perpage"> 
    <dt> 
    <a href="javascript:void(0);" rel="nofollow"> 
    <span id="dropdownArrow" class="close">Items per page</span> 
    </a> 
    </dt> 
    <dd> 
    <ul style="display: none;"> 
    <li> 
    <li> 
    <li> 
    </ul> 
    </dd> 
    </dl> 
    </div> 

:

다음은 내 HTML 코드입니다. 단 두 번 클릭하면 전환됩니다. 이것을 위해 작성된 Jquery 코드는 다음과 같습니다.

$(document).ready(function($) 
     { 
      $(".selectcsdd.perpage dt a").click(function() { 
       $(".selectcsdd.perpage dd ul").toggle(function(){    
      var arrow = $(".selectcsdd.perpage #dropdownArrow").attr('class'); 
       if(arrow=='close'){ 
       $(".selectcsdd.perpage #dropdownArrow").attr('class','open'); 
      } 
      else if(arrow=='open'){ 
       $(".selectcsdd.perpage #dropdownArrow").attr('class','close'); 
      } 
     }); 
    }); 
    $(".selectcsdd.sortby dt a").click(function() { 
     $(".selectcsdd.sortby dd ul").toggle(function(){ 
      var arrow = $(".selectcsdd.sortby #dropdownArrow").attr('class'); 
      if(arrow=='close'){ 
       $(".selectcsdd.sortby #dropdownArrow").attr('class','open'); 
      } 
      else if(arrow=='open'){ 
       $(".selectcsdd.sortby #dropdownArrow").attr('class','close'); 
      } 
     }); 
    }); 

    $(document).bind('click', function(e) { 
     var $clicked = $(e.target); 
     if (! $clicked.parents().hasClass("open")) 
      $(".selectcsdd.perpage dd ul").hide(); 
      $(".selectcsdd.sortby dd ul").hide(); 
    }); 
}); 

어떤 생각?

Answer 1

문제를 일으키는 것으로 보이는 요소에서 .click()과 .bind('click')을 사용하고 있습니다. 당신이 .bind()을 제거하면 그것은

Answer 2

이 시도 잘 작동 :

$(document).ready(function($) { 

    $(".selectcsdd.perpage dt a").click(function(e) { 
     $(".selectcsdd.perpage dd ul").toggle(function(){    
      var arrow = $(e.target).attr('class'); 
      if(arrow=='close'){ 
       $(".selectcsdd.perpage #dropdownArrow").attr('class','open'); 
      } 
      else if(arrow=='open'){ 
       $(".selectcsdd.perpage #dropdownArrow").attr('class','close'); 
      } 
      if (! e.class == 'open'){ 
       $(".selectcsdd.perpage dd ul").hide(); 
       $(".selectcsdd.sortby dd ul").hide(); 
      } 
     }); 
    }); 
    $(".selectcsdd.sortby dt a").click(function() { 
     $(".selectcsdd.sortby dd ul").toggle(function(){ 
      var arrow = $(".selectcsdd.sortby #dropdownArrow").attr('class'); 
      if(arrow=='close'){ 
       $(".selectcsdd.sortby #dropdownArrow").attr('class','open'); 
      } 
      else if(arrow=='open'){ 
       $(".selectcsdd.sortby #dropdownArrow").attr('class','close'); 
      } 
     }); 
    }); 
}); 

문서에 바인딩 클릭 이벤트를 갖는 및 링크가 오류의 원인이되었다. 이 링크는 이벤트를 포착하고 문서를 아무 것도 남기지 않습니다. 이벤트는 링크가 발생했을 때 모든 것을 처리하지 않는 이유만으로 링크에 관심이 있습니까? 아이디 만 페이지에 한 번 나타날 수 있습니다 - 당신의 제한 마크 업 당신이 당신의 페이지에 "dropdownArrow"의 여러 인스턴스가 나타납니다 코드에서