Toggle Höhe von Inline-Div JQuery

ich stecken geblieben, während die Höhe des div .Es gibt mehrere div mit CSS Animieren float:left .Wenn ich die besondere div seine Höhe click sollte increase.But seit seiner Höhe alle anderen div Position nimmt zu ändert sich auch nicht. Ich will nicht, dass sie ihre Position ändern. Was ich will, ist, dass das div gerade unter dem target div sich bewegen sollte, ohne die anderen divs zu beeinflussen.Toggle Höhe von Inline-Div JQuery

Fiddle

Hier ist der Code.

$("div").click(function() { 
 
    if ($(this).height() != 100) 
 
    $(this).animate({ 
 
     height: 100 
 
    }, 1000); 
 
    else 
 
    $(this).animate({ 
 
     height: 150 
 
    }, 1000); 
 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid; 
 
    float: left; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    HELLO WORLD 1 
 
</div> 
 
<div> 
 
    HELLO WORLD 2 
 
</div> 
 
<div> 
 
    HELLO WORLD 3 
 
</div> 
 
<div> 
 
    HELLO WORLD 4 
 
</div> 
 
<div> 
 
    HELLO WORLD 5 
 
</div> 
 
<div> 
 
    HELLO WORLD 6 
 
</div> 
 
<div> 
 
    HELLO WORLD 7 
 
</div> 
 
<div> 
 
    HELLO WORLD 8 
 
</div> 
 
<div> 
 
    HELLO WORLD 9 
 
</div> 
 
<div> 
 
    HELLO WORLD 10 
 
</div>

Quelle

2017-02-22 shubham agrawal

Hier ist eine Lösung, die Spalten verwendet.Sie können die Größe des Fensters und die Spalten neu besiedelt:

var $boxes; 
 

 
$(document).ready(function() { 
 
    $boxes = $(".box"); 
 
\t setupColumns(); 
 
    $(window).on("resize", setupColumns); 
 
}); 
 

 
function setupColumns() { 
 
\t var $columnwrapper = $("#columns"); 
 
    var w = $("<div>").addClass("column").width(); 
 
    var cnt = Math.floor($columnwrapper.width()/w); 
 
    var cols = []; 
 
    for (var i = 0; i < cnt; i++) { 
 
    \t var $col = $("<div>").addClass("column"); 
 
    cols.push($col); 
 
    } 
 
    $columnwrapper.append(cols); 
 
    var cnt = 0; 
 
    $boxes.each(function() { 
 
    \t $(this).detach().appendTo(cols[cnt]); 
 
    cnt = (cnt + 1) % cols.length; 
 
    }); 
 
} 
 

 
$(".box").click(function() { 
 
    if ($(this).height() != 100) 
 
    $(this).animate({ 
 
     height: 100 
 
    }, 1000); 
 
    else 
 
    $(this).animate({ 
 
     height: 150 
 
    }, 1000); 
 
});

.column { 
 
    width: 114px; 
 
    float: left 
 
} 
 
.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid; 
 
    margin-bottom: 10px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="columns"></div> 
 
<div class="box"> 
 
    HELLO WORLD 1 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 2 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 3 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 4 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 5 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 6 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 7 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 8 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 9 
 
</div> 
 
<div class="box"> 
 
    HELLO WORLD 10 
 
</div>

Quelle

2017-02-22 16:57:16

Geige für einfache Größenanpassung: https://jsfiddle.net/6md9wrxL/3/ –

obwohl diese Geige nur in Mozilla funktioniert, aber nach ein paar Änderungen funktioniert es gut in allen Browsern. –

Aktualisierte Arbeitsgeige: https://jsfiddle.net/7ztj63mj/ –

Sie müssen den Schwimmer auf jede neue Zeile löschen. Ich würde vorschlagen, es von float: left; zu display: inline-block; zu ändern, und vergessen Sie nicht, vertical-align: top; hinzuzufügen.

div { 
    width: 100px; 
    height: 100px; 
    border: 2px solid; 
    margin: 10px; 
    display: inline-block; 
    vertical-align: top; 
}

jsFiddle

Quelle

2017-02-22 16:41:13 Stickers

Dies ist ähnlich zu dem, was ich suche, aber ich möchte, dass die div in der Spalte der Ziel divs nach unten bewegen sollte nicht die anderen divs –

Wenn das der Fall ist, müssten Sie eine maximale Höhe haben und es leer lassen. Wenn es sich dehnt, werden sich die anderen nicht bewegen. Außer wenn du willst, dass es die anderen hochklettert, während es sich dehnt. –

@shubhamagrawal Ich sehe, können Sie jede Gruppe von Blöcken in eine Spalte setzen? also werden sie in mehreren Spalten sein. – Stickers

Eine Möglichkeit, die Elemente Höhe zu wechseln, ohne die Position divs zu beeinflussen umliegender wäre absolut in der bestehenden divs ein Element zu positionieren, wechseln Sie dann die Höhe statt.

$("span").click(function() { 
 
    if ($(this).height() != 100) 
 
    $(this).animate({ 
 
     height: 100 
 
    }, 1000); 
 
    else 
 
    $(this).animate({ 
 
     height: 150 
 
    }, 1000); 
 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
    margin: 10px; 
 
    position: relative; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 2px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div><span> 
 
HELLO WORLD 1 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 2 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 3 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 4 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 5 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 6 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 7 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 8 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 9 
 
</span></div> 
 
<div><span> 
 
HELLO WORLD 10 
 
</span></div>

Quelle

2017-02-22 16:44:36

$("article").click(function() { 
 
    if ($(this).height() != 300) 
 
      $(this).animate({ height: 300 }, 1000); 
 
    else 
 
      $(this).animate({ height: 200 }, 1000); 
 
});

.column { 
 
    float: left; 
 
    width: 45%; /* or fixed amount */ 
 
    margin-right: 5%; /* or fixed amount */ 
 
} 
 

 
article { 
 
    border:1px solid; 
 
    margin-bottom: 24px; 
 
    background-color: #f6f6f8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column"> 
 
    <article> 
 
     <h2>Phasellus Molestie Magna</h2> 
 
     <p>Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Ut In Nulla Enim</h2> 
 
     <p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Curabitur Vulputate</h2> 
 
     <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Suspendisse Dictum Feugiat Nisl</h2> 
 
     <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia.</p> 
 
    </article> 
 
</div> 
 

 

 
<div class="column"> 
 
    <article> 
 
     <h2>Donec Congue</h2> 
 
     <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Proin Quis Tortor</h2> 
 
     <p>Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla.</p> 
 
    </article> 
 
    <article> 
 
     <h2>Praesent Id Metus Massa, Ut</h2> 
 
     <p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa.</p> 
 
    </article> 
 
</div>

Nur eine Geige hier aktualisiert .. es kann sein, was u wollen: codehttp://jsfiddle.net/dssoft32/BqQF3/2/

Quelle

2017-02-22 16:50:28

-1

Auch sollten Sie Ihren Zustand ändern:

if ($(this).height() != 100)

in etwas wie folgt aus:

if ($(this).hasClass("div-100"))

Nur weil in einigen Fällen $(this).height() <> 100. Zum Beispiel für Chrome 56.0.2924.87 (x64) und DPI Skalierung Ebene für Displays in Windows 125%:

Zoomstufe 90% - $(this).height() = 99.99999725097656
Zoomstufe 100% - $(this).height() = 100.00000457763672
Zoomstufe 110% - $(this).height() = 99.99999576416016

Quelle

2017-02-22 16:56:00 kb0

Dies ist ein Kommentar, keine Antwort. –

Toggle Höhe von Inline-Div JQuery

Antwort

Verwandte Themen