Question

$(document).ready(function(){
$(".firstUL").css('display','none');

    $(".matches").click(function(){
        $(".firstUL").slideToggle();
    });

    if ($(".firstUL").is(":visible")){

        $(".closeMatches").click(function(){
            $(".firstUL:visible").slideToggle();
        });
    };
});

点击.matches和.firstUL slidetoggle。检查.firstUL是否可见，.closeMatches可以关闭/滑动.firstUL。

我哪里做错了？

Answer 1

检查它是否可见。

$("#ID").is(':visible');

检查它是否隐藏。

$("#ID").is(':hidden');

注意：但在您的情况下，您使用的是.firstUL类选择器，这意味着存在多个具有相同类的元素。并且所有这些都可能同时不是hidden或visible。

Answer 2

只需在if part功能之外删除代码的$(document).ready。

当您在$(document).ready函数中使用代码时，代码将在DOM完全加载时执行。现在当你在$(document).ready函数内检查firstUL是否可见时，js总是发现它是隐藏的。那是因为只有在点击匹配按钮时元素才会变得可见。但点击匹配按钮后，if部分将不会执行，因为只有在页面重新加载时它才会再次运行。因此，你的if语句总是发现它是隐藏的。

工作代码

$(document).ready(function() {
  $(".firstUL").css('display', 'none');

  $(".matches").click(function() {
    $(".firstUL").slideToggle();
  });


});
 $('.firstUL').ready(function(){

  $(".closeMatches").click(function() {
    $(".firstUL").css('display', 'none');
  });
});

<div class="firstUL">.firstUL</div>
<button class="matches">matches</button>
<button class="closeMatches">closeMatches</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

JQuery，检查某些东西是否打开并关闭它

2 个答案: