切换一个div的内容并改变另一个div的高度在jquery

问题描述：

我想切换高度并显示两个不同的divs与jQuery相同的onclick事件。我觉得我可能会错过一些我不知道的jQuery中的小或规则。在第一次点击时，所有内容都会按计划显示并更改高度，但第二个并不会使内容最小化。切换一个div的内容并改变另一个div的高度在jquery

jQuery(document).ready(function(){ 
    jQuery('.readmore').on('click', function(event) {   
     if (jQuery("#content").height() == 500) { 
      jQuery("#content").animate(
       {height: "750px"}); 
      jQuery('#hidden').toggle('show'); 
     } 
     else { 
      $("#content").animate({height: "500px"}); 
      jQuery('#hidden').toggle('hide'); 
     } 
    }); 
});

的DIV开始了作为500px高，想的是和750px同时显示在#hidden内容之间切换之间切换他们。

这里是我的HTML

<div id="content"> 
<p></p> 
<div id="hidden" style="font-size:18px"> 
<p></p> 
</div> 
</div> 
<div class="content3"> 
<p><a class="readmore" href="javascript://">Read More </a></div>

请张贴您的html以及 –

谢谢！刚刚在 – SleBluue

中加入了它，你在所有行上使用'jQuery'，除了else之后的行。你确定$不是问题？ – yezzz

答

您可以只使用内置的show()和hide()功能与jQuery。

当你拥有了它，这一点：

jQuery('#hidden').toggle('show');

这

jQuery('#hidden').toggle('hide');

被拨动类.show和.hide。因此，如果你的类与默认样式不同，它们可能会改变你期望的功能。您最初需要.hide类来隐藏事件，但在此之后，不需要切换该类。

jQuery还假设最初的div是总是 500px高。因此，如果#content div的高度小于500px，则需要2次点击才能再次将其降至最低。你可以调整函数来说明div小于500px高度的情况，它应该都能按预期工作。

jQuery(document).ready(function(){ 
 
    jQuery('.readmore').on('click', function(event) {   
 
     if (jQuery("#content").height() <= 500) { 
 
      jQuery("#content").animate(
 
       {height: "750px"}); 
 
      jQuery('#hidden').show(); 
 
     } 
 
     else { 
 
      $("#content").animate({height: "500px"}); 
 
      jQuery('#hidden').hide(); 
 
     } 
 
    }); 
 
});

.hide { display: none; } 
 
div { padding: 20px; } 
 
#content { background: #aaa;} 
 
#hidden { background: #eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
<p>displayed text</p> 
 
<div id="hidden" class="hide" style="font-size:18px"> 
 
<p>hidden text</p> 
 
</div> 
 
</div> 
 
<div class="content3"> 
 
<p><a class="readmore" href="javascript://">Read More </a></div>

这将扩大高度750px无论初始高度的...然后最小化至500像素的第二次点击。

答

如果使用自定义CSS 类改变风格DOM的元素和动画元素与CSS过渡而不是写的太多的代码jQuery的这将是非常方便的。

这里是片断

jQuery(document).ready(function(){ 
 
    jQuery('.readmore').on('click', function(event) {   
 
     jQuery("#content").toggleClass("expand"); 
 
    }); 
 
});

#content{ 
 
    height:100px; 
 
    background-color:#f0f0f0; 
 
    border:1px solid #E5EAF2; 
 
    -webkit-transition:height 0.6s linear; 
 
    transition:height 0.6s linear; 
 
} 
 

 
.expand{ 
 
    height: 750px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
<p></p> 
 
<div id="hidden" style="font-size:18px"> 
 
<p> 
 
</p> 
 
</div> 
 
</div> 
 
<div class="content3"> 
 
<p><a class="readmore" href="javascript://">Read More </a></div>

在上述片断我已创建一个CSS类expand和刚刚切换与jquery该类，因此高度好。而对于我使用css transitions到#content的转换。

希望它有帮助。

切换一个div的内容并改变另一个div的高度在jquery

相关推荐