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的第二次点击作品

回答

相关问题