2016-08-25 13 views
0
jQuery(document).ready(function($) { 

var $cityToggler=$("#choose-city"); 


function showSelector(){ 
    var $citySelector=$("#city-selector"); 

    if ($citySelector.hasClass("opened")){ 
     $citySelector.slideDown().removeClass("opened"); 
     $cityToggler.addClass("pressed"); 
    } else { 
     $citySelector.slideUp("fast").addClass("opened"); 
     $cityToggler.removeClass("pressed"); 

    } 
} 
$("#choose-city, #close-selector").on("click", function(e){ 
    e.preventDefault(); 
    showSelector(); 
}); 

}); 

작동, "도시 선택은"링크 "를 선택 도시"의 첫번째 클릭으로 열 수 있습니다. 두 번째 클릭 만 열면 작동합니다. (개설 됨)JQuery와 두 번째 클릭은 내 의견으로는 <a href="https://jsfiddle.net/fwyukjom/" rel="nofollow">https://jsfiddle.net/fwyukjom/</a></p> <p>

나는 실수를 했습니까?

답변

0

열린 클래스가 첫 번째 클릭시 존재하지 않았으므로 다시 클릭하면 생성됩니다.

$(document).ready(function() { 

    $("span:contains(Select city)").on("click",function(){ 

     $(".city-selector").slideToggle(2000); 

    }) 
}) 

최종 코드 :

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     .city-selector{ 
 
    display:none; 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 
    
 
<div id="city-selector" class="city-selector hide"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <a href="#" id="close-selector"> 
 
       <i class="fa fa-times-circle-o"></i> 
 
      </a> 
 
      <p>your city</p> 
 
      <p class="h1">Moscow</p> 
 
     </div> 
 
        
 
    </div> 
 
    </div> 
 
    <div class="row rel"> 
 
     <div class="col-md-offset-8"> 
 
      <a href="#" id="choose-city" class="current-city"> 
 
       <span>Select city</span> 
 
       <i class="fa"></i> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 

 
     $("span:contains(Select city)").on("click",function(){ 
 

 
      $(".city-selector").slideToggle(2000); 
 

 
     }) 
 
    }) 
 
    </script> 
 
</body> 
 
</html>

+0

왜 그가이 시도해야

는이 같은 쉬운 방법을 사용할 수 있습니까? 자신의 코드에 무엇이 잘못되었으며 어떻게 수정했는지 설명하고, 코드를 게시하는 것이 아닙니다. – Barmar

+0

@Barmar, 열린 클래스는 첫 번째 클릭시 존재하지 않았으며 다시 클릭하면 생성되었습니다. – Ehsan

+0

해설을 대답이 아니라 주석으로 표시하십시오. – Barmar

0

논리가 조금 혼란 스러웠습니다. 이 시도 : 당신이 논리 블록을 추가/ 전에 를 제거해야하므로

function showSelector(){ 
    var $citySelector=$("#city-selector"); 
     $citySelector.toggleClass('opened'); 

    if ($citySelector.hasClass("opened")){ 
     $citySelector.slideDown(); 
     $cityToggler.addClass("pressed"); 
    } else { 
     $citySelector.slideUp("fast"); 
     $cityToggler.removeClass("pressed"); 

    } 
} 

기본적으로, opened 클래스, 첫 번째 클릭에 존재하지 않았다.

관련 문제