我是jQuery的新手,需要更改父div的类。
当用户点击“切换类”按钮时,父div的类从“col-md-8”变为“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>

最佳答案

您已经在图像元素中添加了class='img-responsive'。这是一个引导类,它将图像转换为响应图像。
这意味着在调整其父div的大小时将调整自身的大小。
引导响应图像:http://v4-alpha.getbootstrap.com/content/images/#responsive-images
若要更改父div,请将id='parent'添加到div,并为按钮添加id='toggle'。另外,在您的按钮中,您可以添加一个名为style='float:right'的类,而不是pull-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>

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

干杯!:)

09-10 00:52
查看更多