Question

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/

在我看来，＆＃34;城市选择者＆＃34;应首先点击链接打开＃34;选择城市＆＃34;。但它只从第二次点击打开，然后工作正常。（断开 - 关闭）

我错了吗？

Answer 1

你的逻辑有点困惑。试试这个：

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类不存在，因此您需要在逻辑块之前添加/删除。

Answer 2

第一次单击时，

打开的类不存在，再次单击时会创建。

您可以使用更简单的方式：

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

jquery第二次点击工作

2 个答案: