Question

我在First Div中有两个div有一个图像，如果我点击图像左Div必须重新调整右侧Div必须显示整页内容然后如果我再次点击图像右侧div已经转到原始位置。 .how实现这个??

 <div style="border: 2px solid red;float:left;width:10%;height:400px "> <a href>Image Click</a></div>
<div style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to show in full page</div>

Answer 1

由于你没有给图像div提供任何id / class，你可以试试这个：

$('div').find('a').on('click', function (e) {
   e.preventDefault();
   var height = $(this).closest('div').css('height');
   if (height === "400px") {
      $(this).closest('div').css('height', 'auto');
   } else {
      $(this).closest('div').css('height', '400px');
   }
});

Updated Demo

Answer 2

您可以拥有两个类，然后根据点击添加或删除<div class="smaller">标记中的类。类可以是这样的：

.bigger
{
border: 2px solid Blue;
float:left;
width:50%;
height:500px
}
.smaller{
border: 2px solid red;
float:left;
width:10%;
height:400px; 
}

Answer 3

试用此代码

<强> HTML

 <div id="fdiv" style="border: 2px solid red;float:left;width:7%;height:400px "> <a href>Image Click</a></div>
<div id="sdiv" style="border: 2px solid Blue;float:left;width:50%;height:500px "> Content to show in full page</div>

<强> JS

    <script type="text/javascript">
        $(document).ready(function () {
            var swidth=$('#sdiv').width();
$('#fdiv a').click(function (e) {
            e.preventDefault();

     var dupwidth=swidth;
            $('#sdiv').animate({ 'height': ($('#sdiv').height() == 500) ? 700 : 500 ,'width': ($('#sdiv').width() == swidth) ? parseInt(dupwidth)*1.75 : swidth }, 200);

        });

        });

    </script>

<强> DEMO HERE

Div根据图像调整大小单击

3 个答案:

Updated Demo