JQuery CSS-Verfahren ändert nicht die Höhe Element

Ich habe ein Gitter mit einigen Elementen. Diese Elemente haben die Klasse item. Wenn ich in einem von ihnen klicken Sie, Toogle ich die expand dieses Element zu ändern.JQuery CSS-Verfahren ändert nicht die Höhe Element

<body> 
     <div class="grid"> 
       <a href="#"> 
        <div class="item" style="background-image: url('https://i.giphy.com/l0NwI1oBNxYfoRRny.gif'); height: 270px; background-size: cover; background-repeat: no-repeat; position: absolute;"> 
        </div> 
       </a> 
       <a href="#"> 
        <div class="item" style="background-image: url('https://i.giphy.com/pYI1hSqUdcBiw.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"> 
        </div> 
       </a> 
       <a href="#"> 
        <div class="item" style="background-image: url('https://i.giphy.com/l3vR58nYgtIUKua1G.gif'); height: 149px; background-size: cover; background-repeat: no-repeat; position: absolute;"> 
        </div> 
       </a> 
       <a href="#"> 
        <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"> 
        </div> 
       </a> 
       ... 
     </div> 
    </body>

CSS

.item { 
    color: white; 
    display: table; 
    font-size: 1.4em; 
    text-align: center; 
    margin: 5px; 
    width: 270px; 

} 

.expand { 
    transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s; 
    -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s; 
    height: 100% ; 
    width: 100%; 
    left: 0 !important; 
    top: 0 ; 
    z-index: 99; 
    text-indent: -9999px; 
}

$('.item').click(function() { 
     $(this).toggleClass('expand'); 
});

Also, die width ändert die Größe auf die 100% der Mutter Größe (grid), aber die height nicht ändert .

Dies ist die Grid-Ansicht vor, klicken Sie auf ein beliebiges Element Element

Nach dem Einschalten des dritten Elements klicken

So, hier ist das Problem: Im gleichen JS Methode ich habe versucht, hinzuzufügen:

$('.item').click(function() { 
     var height = $(this).height(); 
     var width = $(this).width(); 
     var act = $(this).hasClass("expand"); 
     if(act){ 
      $('.expand').css('height',Math.floor($('.grid').width() * height/width) + 'px !important'); 
      $('.expand').css('width','50% !important'); 
     } 
}

Aber die height und width nicht ändern. Also, aus irgendeinem Grunde diese $('.expand').css() Methode fügt die neuen Werte.

Quelle

2017-07-19 Alberto Crespo

Da Sie height als Inline-Stil zu .item definiert haben und ein Inline-Stil Stile aus einem externen Stylesheet überschreibt. Entweder bewegen, dass height zu .item oder verwenden !important mit height in .expand

$(".item").click(function() { 
 
    $(this).toggleClass("expand"); 
 
});

.item { 
 
    color: white; 
 
    display: table; 
 
    font-size: 1.4em; 
 
    text-align: center; 
 
    margin: 5px; 
 
    width: 270px; 
 
} 
 

 
.expand { 
 
    transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s; 
 
    -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s; 
 
    height: 100% !important; 
 
    width: 100%; 
 
    left: 0 !important; 
 
    top: 0; 
 
    z-index: 99; 
 
    text-indent: -9999px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<body> 
 
    <div class="grid"> 
 
    <a href="#"> 
 
     <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); background-size: cover; background-repeat: no-repeat; position: absolute;"> 
 
     </div> 
 
    </a> 
 
    <a href="#"> 
 
     <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); background-size: cover; background-repeat: no-repeat; position: absolute;"> 
 
     </div> 
 
    </a> 
 
    <a href="#"> 
 
     <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); background-size: cover; background-repeat: no-repeat; position: absolute;"> 
 
     </div> 
 
    </a> 
 
    <a href="#"> 
 
     <div class="item" style="height: 202px; background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); background-size: cover; background-repeat: no-repeat; position: absolute;"> 
 
     </div> 
 
    </a> 
 
    ... 
 
    </div> 
 
</body>

Quelle

2017-07-19 17:30:10

Das Problem, dass jeder ist Das Element "item" muss die Höhe im Inline-Stil definiert haben. Ich habe versucht, das '$ ('. Expand'). Css ('Höhe', Math.floor ($ ('. Raster'). Breite() * Höhe/Breite) + 'px! Wichtig');' Aber funktioniert nicht. Wenn ich das '! Wichtig 'auf der' Breite 'versuche, funktioniert es nicht' $ ('. Expand'). Css ('width', '50%! Wichtig');'. –

@AlbertoCrespo '! Wichtig' funktioniert gut - aktualisiert meine Antwort. –

entfernen Inline-Stil height: 202px; von div.item und fügen height: 202px zu CSS-Klasse .item

Inline-Stil hat mehr Gewicht als dein Stylesheet. Deshalb wird height: 100% in .expand nicht angewendet.

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Quelle

2017-07-19 17:50:37 kmsheng

Erstens glaube ich, es besser sein wird in CSS den Zeiger zuweisen, anstatt die <a> der Verwendung kann es ein Teil des Problems sein ...

Zweitens könnten Sie ein versteckt haben div Höhe: 100% Breite: 100%, die das Bild lädt und erscheint dann oben auf alle anderen Anzeigen es.

<body> 
    <div id="showDiv"></div> 
    <div class="grid"> 
     <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"></div> 
     <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"></div> 
     <div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;"></div> 
      ... 
    </div> 
</body>

Dann

$('.item').click(function() { 
    var img = $(this).css("background-image"); 
    $('#showDiv').css({'background-image':img}); 
    $('#showDiv').show(); 
    } 
} 
$("#showDiv").click(function(){ 
    $(this).hide(); 
    $('#showDiv').css({'background-image':""}); 
});

und Stil showDiv

#showDiv{ 
    display:none; 
    height: 100%; 
    widht: 100%; 
    z-index: 999; 
}

Dies ist eine Option, die nicht vermasseln Ihre Seite wird jedes Mal ...

Quelle

2017-07-19 17:53:39

JQuery CSS-Verfahren ändert nicht die Höhe Element

Antwort

Verwandte Themen