Question

我的jquery代码有问题。我有一个按钮和一个div。当我点击时按钮打开或关闭div。所以我做了一个测试，以获得div的类。当隐藏div时，我会在div可见时使其可见并隐藏。这是我的代码，我不知道出了什么问题

    <button type="button" class="btn btn-default" id="btn-collapse">Left</button>
    <div id="mapBlock" class="hidden">
    </div>

    <script type="text/javascript">
    $(document).ready(function() {


    var classe = $('#mapBlock').attr('class');
     $('#btn-collapse').click(function() {
        if(classe == "hidden"){
          $('#mapBlock').removeClass("hidden").addClass("visible");  
       }
       if(classe == "visible"){
          $('#mapBlock').removeClass("visible").addClass("hidden");  
       }
     });
});

    </script>

Answer 1

每次点击按钮

时都应该上课

$('#btn-collapse').click(function() {
    var classe = $('#mapBlock').attr('class');
    if (classe == "hidden") {
        $('#mapBlock').removeClass("hidden").addClass("visible");
    }
    if (classe == "visible") {
        $('#mapBlock').removeClass("visible").addClass("hidden");
    }
});

使用.hasClass()

将是更好的选择

 $('#btn-collapse').click(function() {

        if ($('#mapBlock').hasClass("hidden")) {
            $('#mapBlock').removeClass("hidden").addClass("visible");
        }
        if ($('#mapBlock').hasClass("visible")) {
            $('#mapBlock').removeClass("visible").addClass("hidden");
        }
    });

Answer 2

为什么不只是toggle()可见度？

$('#btn-collapse').click(function() {
    $('#mapBlock').toggle(); 
});

Answer 3

你可以尝试旧的toggleClass技巧，这不需要知道对象的状态，并且始终是任意方向的二进制切换：

$('#btn-collapse').click(function() {
    $('#mapBlock').toggleClass("hidden");
});

Answer 4

在文档准备就绪时，您将#mapBlock的类属性存储在变量＆＃39; classe＆＃39;

中

这意味着当您单击该按钮时，它将始终将您的if语句与您从开始时保存的内容进行比较，每次都不会更新。尝试将变量声明放在你的函数中，它应该可以工作。

隐藏并使用按钮使div可见

4 个答案: