1. 首页
  2. 问答
  3. JQuery CSS方法不改变高度元素

JQuery CSS方法不改变高度元素

2017-07-19 14 views
0

我有一个网格与一些元素。这些元素的类别为item。当我点击其中的一个时，我会通过expand来调整此元素的大小。JQuery CSS方法不改变高度元素

<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; 
}

JS

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

所以，width调整大小以父大小（grid）的100％，但height 没有变化。

这是前点击网格视图中的任何项目元素

This is the grid view before click on any item element

上点击第三个元素

After clicking on the third element

等信息之后，现在的问题是：在同一个JS我尝试添加的方法：

$('.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'); 
     } 
}

但height和width不改变。所以，由于某种原因，这个$('.expand').css()方法没有添加新的值。

来源

2017-07-19 Alberto Crespo

回答

1

因为您已将height定义为内联样式为.item，并且内联样式将覆盖外部样式表中的样式。无论是移动到height或.item使用!important与height在.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>

来源

2017-07-19 17:30:10

+0

的问题是，每一个选项'item'元素必须定义内联样式的高度。我尝试做'$（'。expand'）.css（'height'，Math.floor（$（'。grid'）.width（）* height/width）+'px！important'）;'但是不起作用。如果我在'width'上试试'！important'，它不会起作用$'（'。expand'）。css（'width'，'50％！important'）;'。 –

+0

@AlbertoCrespo'！重要的'工作得很好 - 更新了我的答案。 –

0

首先，我相信这将是更好地在CSS指针分配，而不是使用<a>它可以是问题的一部分，...

其次，你可以有一个隐藏div高度：100％宽度：100％，加载图像，然后出现在所有其他显示它的顶部。

<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>

然后

$('.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':""}); 
});

和风格showDiv

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

这是不会每次都弄乱你的网页...

来源

2017-07-19 17:53:39

相关问题

 相关问题