0

我在列表元素中有一个 div 。每次他们单击父列表元素时，我都会隐藏/显示 div。该功能正在运行，但是动画在动画结束时跳转。我认为这与每次隐藏/显示内部的 div 时更改高度的父列表元素有关。我似乎无法弄清楚如何处理它。我认为这是一个CSS问题？

链接到 JSFIDDLE

HTML：

<li id='band'>
  <h3>BAND</h3>
    <div class='content'>
        <p>Lorem ipsum.</p>
   </div>
</li>

CSS

#centerpage ul {
  padding: 0;
  list-style: none;
  text-align: center;
}

#centerpage ul li p {
  margin: 0;
}

.content {
    background-color: green;
    width: 100%;
    overflow: hidden;
}

JQUERY/JAVASCRIPT

$(function() {
    var $el = $('#links ul li');

    $el.each(function() {
        var $content = $(this).children().filter('.content');
        var height = $content.height();
        $content.hide().css({ height: 0});
        var listheight = $(this).height();
        console.log(listheight);

        $(this).click(function() {

            var $content = $(this).children().filter('.content');
            if ( $content.is(':visible') ) {
                $content.animate( {
                    height: 0
                }, 1000, function() {   
                    $content.hide();

                });
            }

            else {
                $content.show().animate({ height: height }, { duration: 1000} );
            }

        })  

    })

})
4

0 回答 0