SlideUp功能无法正常工作,但元素已正确删除。有任何想法吗?

时间:2016-01-04 17:39:53

标签: jquery twitter-bootstrap

此时在一个bootstrap网站上工作并试图使其成为一个按钮,一个元素就会向上滑动。我使用的功能是我曾经使用过的功能,但它似乎并没有起作用。元素被正确删除但根本没有向上滑动。任何帮助将不胜感激!

编辑:

只是为了澄清紫色背景的元素应该在点击&#34后向上滑动;阅读更多"。

<div class="container-fluid fill">
            <div class="row main-row fill">
                <div class="main-col col-lg-5">
                    <h1 class="main-title">Breathtaking Journey To Well Being</h1>
                    <p class="main-text">Daimler and unycom started a primising partnership to broaden the visionary horizon of a company that defines inovation.
                    </p>
                    <div class="btn btn-default main-button btn-clr" id="menu-toggle">View Packages</div>
                    <div  class="btn btn-default btn-clr read-more" id="anna-toggle">Read More</div>
                </div>
                <div class="col-lg-6 fill color" id="lol">
                    <h1 class="main-title">Breathtaking Journey To Well Being</h1>
                    <p class="main-text">Daimler and unycom started a primising partnership to broaden the visionary horizon of a company that defines inovation.
                    </p>
                    <a href="" class="btn btn-default main-button btn-clr">View Packages</a>
                    <a href="" class="btn btn-default btn-clr read-more">Read More</a>
                </div>
            </div>
 </div>


$("#anna-toggle").click(function() {
     $("#lol").slideUp(700,  function() { $(this).remove(); });
});

https://jsfiddle.net/4u9qow2h/1/

1 个答案:

答案 0 :(得分:1)

https://jsfiddle.net/4u9qow2h/3/

这就是问题

.fill { 
    min-height: 100%; <-- 
    height: 100%;
}

你不允许这个元素的高度低于100%,所以它导致jQuery搞砸了。我在jsFiddle中将其删除,以便您可以看到它是如何工作的。