javascript - 使用 jQuery 更改 div 的大小

Question

我是 jQuery 的新手，需要更改父 div 的类。 当用户点击“Toggle Class”按钮时，父div的class从“col-md-8”更改为“< strong>col-md-4”，图像的高度属性从“500”变为“300”。谁能建议我解决这个问题。 我的html代码是

<div class="col-md-8">
     <div class="panel panel-default">
         <div class="panel-heading">
             <strong>Image</strong>
             <button class="btn btn-default" style="float:right;">Toggle Class</button>
          </div>
      <div class="panel-body">
          <img class="img-responsive" height="500" src="http://lorempixel.com/750/500/" />
      </div>
  </div>
</div>

Answer 1

您已在图像元素中添加了 class='img-responsive'。这是一个 Bootstrap 类，可将您的图像转换为响应式图像。

这意味着当您调整其父 div 的大小时，它将调整自身的大小。

引导响应图像:http://v4-alpha.getbootstrap.com/content/images/#responsive-images

要更改父 div，请向该 div 添加一个 id='parent' 并为您的按钮添加一个 id='toggle'。另外，在按钮中，您可以添加一个名为 pull-right 的类，而不是 style='float:right'。这是同样的事情。

<div class="col-md-8" id='parent' >
     <div class="panel panel-default">
         <div class="panel-heading">
             <strong>Image</strong>
             <button class="btn btn-default pull-right" 
                id='toggle'>Toggle Class</button>
         </div>

         <div class="panel-body" style=''>
             <img class="img-responsive" height='500' 
                 src="http://lorempixel.com/750/500/" />
        </div>
  </div>
</div>

Jquery

$(document).ready(function(){
   $('#toggle').on('click',function(){
       $('#parent').toggleClass('col-md-4');
   });
});

干杯! :)