改变一些html的位置使用jquery隐藏一些html

Question

如何在这种情况下使用jquery操作css： 我连续两个盒子，当第一个盒子隐藏时，我将第二个盒子的宽度改为满页。

隐藏第一个表格后，剩下一个空格。所以表格看起来很奇怪。像这样 ：

这是我的jquery显示/隐藏框。

// code to hide the first box
$(document).on('click', '#close', function() {
        $("#kotak_pencarian").hide(); //hide the box
        $('#btn-pencarian').show(); // show button for toggle
        $("#kotak_hasil").removeClass("span9").addClass("span12"); //manipulate width second box
    });

    // code to show the first box
    $(document).on('click', '#btn-pencarian', function() {
        $(this).hide(); // toggle button show 1st box
        $("#kotak_pencarian").show(); // show first box
        $("#kotak_hasil").removeClass("span12").addClass("span9"); //manipulate width of second box
    });

我使用firebug调试它，我的代码在DOM jquery之前看起来像这样，

<div id="kotak_pencarian" class="box span3"> .... bla,bla of first box
<div id="kotak_hasil" class="box span9">... bla bla of second box,

但是当隐藏第一个框时，代码变为：

<div id="kotak_pencarian" class="box span3" style="display: none;"> .. first box
<div id="kotak_hasil" class="box span12"> ...second box

我认为我必须在jquery上操纵css，我怎样才能让它成为整洁的css？

Answer 1

切换按钮在哪里？ 也许您的span 12上的kotak_hasil div课程因按钮无法正常工作？

或者您margin-left上可能有kotak_hasil div？

希望有所帮助