Question

我正在尝试切换高度，并使用jquery在同一divs事件上显示两个不同的onclick。我觉得我可能会遗漏一些我不知道的小问题或jquery规则。在第一次点击时，所有内容都显示并更改高度，如计划，但第二次不会最小化内容。

JS

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之间进行切换时切换到<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

Select

Answer 1

如果您使用自定义 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的内容并更改Jquery中另一个div的高度

1 个答案: