2

用 jQuery 包装 div 后，打开它们然后尝试再次包装它们似乎失去了 float 属性（我的猜测），我不知道如何解决这个问题。

当第一次按下 JSFiddle 波纹管中的换行按钮时，它会像我期望的那样对齐 div。然后我打开 div 并将它们放回原来的位置，这也很好。但是当我再次换行时，div 会一个接一个，而不是一个正方形。有什么想法有什么问题吗？

JSFiddle

HTML

<div id="container">
    <div id="a1" class="block">A1</div>
    <div id="a2" class="block">A2</div>
    <div id="b1" class="block">B1</div>
    <div id="b2" class="block">B2</div>
</div>
<button onclick="wrapIt()">wrap</button>
<button onclick="unwrapIt()">unwrap</button>

CSS - 见 JSFiddle。它只是设置容器的定位、其中的四个 div 和包装。

JS

function wrapIt(){
    $(".block").wrapAll("<div id='wrapping'></div>")
    $(".block").css({ 'position': 'relative' })
    $(".block").css({ 'display': 'inline-block' })
    $(".block").css({ 'margin': 10 }) 
    $(".block").css({"float": "left"})
}
function unwrapIt(){
    $(".block").unwrap()
    $(".block").css({ 'position': 'absolute' })
    $(".block").css({ 'margin': 0 }) 
    $(".block").css({"clear": "both"})

    $("#a1").css({"margin-top": 30})
    $("#a1").css({"margin-left": 30})
    $("#a2").css({"margin-top": 30})
    $("#a2").css({"margin-left": 80})
    $("#b1").css({"margin-top": 80})
    $("#b1").css({"margin-left": 30})
    $("#b2").css({"margin-top": 80})
    $("#b2").css({"margin-left": 80})    
}
4

1 回答 1

0

如果有人搜索类似的解决方案：我确实以稍微不同的方式解决了这个问题——我为此使用了 addClass 和 removeClass 。（仍然不知道为什么第一个不起作用......）

JSFiddle

这是代码：

HTML 同上

CSS

.wrappedclass {
    position: relative;
    float: left;
}
.unwrappedclass {
    position: absolute;
    clear: both;

}

.block {
    height: 40px;
    width: 40px;
    background-color: grey;

}
#container {
    height: 150px;
    width: 150px;
    border: 1px solid black;
}
#wrapping {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: white;
    border: 1px dashed black;
}

JS

$(document).ready(function(){
     $(".block").addClass("unwrappedclass")
     $("#a1").css({"margin": "30px 0 0 30px"})
     $("#a2").css({"margin": "30px 0 0 80px"})
     $("#b1").css({"margin": "80px 0 0 30px"})
     $("#b2").css({"margin": "80px 0 0 80px"})
})

function wrapIt(){
    $(".block").wrapAll("<div id='wrapping'></div>")
               .removeClass("unwrappedclass")
               .addClass("wrappedclass")
    wrappedFormation()
}

function unwrapIt(){
    $(".block").unwrap()
               .removeClass("wrappedclass")
               .addClass("unwrappedclass")    
    unwrappedFormation()
}

function unwrappedFormation(){
    $("#a1").css({"margin": "30px 0 0 30px"})
    $("#a2").css({"margin": "30px 0 0 80px"})
    $("#b1").css({"margin": "80px 0 0 30px"})
    $("#b2").css({"margin": "80px 0 0 80px"})      
}

function wrappedFormation(){
    $(".block").css({"margin": "17px"})
}
于 2014-05-29T07:04:36.907 回答