jQuery的第二次點擊作品

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(); 
}); 

});

https://jsfiddle.net/fwyukjom/jQuery的第二次點擊作品

在我看來，「城市選擇」應該與鏈接「選擇城市」上的第一點擊打開。但它只從第二次點擊打開，然後正常工作。（開啓關閉）

我在哪裏弄錯了？

來源

2016-08-25 d0ublezer0

打開的類在第一次單擊時不存在，並在再次單擊時創建。

你可以這樣使用更簡單的方法：

$(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>

來源

2016-08-25 19:29:02 Ehsan

他爲什麼要試試這個？解釋他的代碼出了什麼問題，以及如何修復它，不要只是發佈代碼。 – Barmar

@Barmar，第一次點擊時不存在打開的類，並在再次單擊時創建。 – Ehsan

將解釋放在答案中，而不是評論。 – Barmar

你的邏輯只是有點困惑。試試這個：

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類沒有首先點擊的存在，所以你需要添加/之前刪除邏輯塊。

來源

2016-08-25 19:16:39 Drey

jQuery的第二次點擊作品

回答

相關問題