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

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显示属性。