Question

我是Jquery的初学者，我设法得到一个按钮来显示div，按钮在显示div时向右移动。我已经看到类似的问题，切换可见性等，但我也需要点击按钮移动按钮，但我试图遵循他们的逻辑，让它工作没有成功。

但是，当我再次点击它时（隐藏div并将按钮移回），我却无法正常工作。

有人能告诉我哪里出错了吗？

Html

<button id="myfilterFunction">Show/Hide</button>

    <div id="filterview">
    <?php echo $column_right; ?></div>
    </div>

Javascript

<script>
        $( "#myfilterFunction" ).click(function() {                                 
            if ($( "#filterview" ).css('display', 'none')) {
            $('#filterview').show();
            $( "#myfilterFunction" ).css('margin-left', '300px');
            }

           if ($( "#filterview" ).css('display', 'block')) {
            $('#filterview').hide();
            $( "#myfilterFunction" ).css('margin-left', '0');
            }
            });
</script>

Answer 1

您没有正确检查元素的可见性。您应该使用.is(":visible")检查元素的可见性（使用jQuery）并相应地处理代码：

$("#myfilterFunction").click(function () {
    // If the element is visible
    if ($("#filterview").is(":visible")) {
        // Code to process
        $('#filterview').hide();
        $("#myfilterFunction").css('margin-left', '0');
    } else {
        // If the element is not visible
        $('#filterview').show();
        $("#myfilterFunction").css('margin-left', '300px');
    }
});

$("#filterview").css('display', 'none')用于实际设置元素的css显示属性。

Jquery显示和隐藏按钮单击，并在同一个单击上移动按钮

1 个答案: