Question

所以我有一个div，我试图让它向下滑动以显示联系信息，我希望在TheGeekDesigner的网站上有类似的效果。如果您点击链接并滚动到底部并点击＆＃34;如何联系我＆＃34;他的联系信息在页面上向下滑动。

我无法让我的代码工作。这是我目前的代码：

HTML

<footer>
    <i class="icon icon-plus-circle icon-3x" id="icon"></i>        
</footer>

<div class="contact-info">
    <section id="exit">
        <a class="exit"><h2>X</h2></a>
    </section>
    <aside id="links">
        <h3>LINKS</h3>
        <p>Follow the links to see site's I've developed!</p>
        <a href="#">Site Link</a>
    </aside>
    <section id="form">
       <form>
       </form>
    </section>
    <section id="social-media"></section>
</div>

CSS

.contact-info {
    position:fixed;
    width:100%;
    height:100%;
    background-color: orange;
    z-index:98;
    display:none;
    top:0;
    left:0;
}

的jQuery

$(document).ready(function() {
    //runs when the DOM is ready
    //function showContactPage shows the contact page
    function showContactPage() {         
        $(this).find('.contact-info').slideToggle();       
    }

    $('#icon').on('click', showContactPage);  
    $('#exit').on('click', 'a', showContactPage);  
});

Answer 1

只需从您的功能中删除$(this).find...即可。

function showContactPage() {
    $('.contact-info').slideToggle();
}

fiddle

它没有用，因为你在页脚内搜索一个contact-info类的div，但它不在那里。

jQuery在页面的其余部分向下滑动div

1 个答案: