JQUERY滑动门效果-适用于JSFIDLE，但不适用于chrome_Jquery_Css

JQUERY滑动门效果-适用于JSFIDLE，但不适用于chrome

jquery css

JQUERY滑动门效果-适用于JSFIDLE，但不适用于chrome,jquery,css,Jquery,Css,我正在尝试使用jquery实现滑动门效果。我已经在JSFIDLE中对其进行了模拟，并且在那里工作正常。我的问题是，当我在本地运行它时，什么都不起作用。我已经在本地下载并链接到jquery库，我还有一个项目，我甚至链接到API，它工作得很好。我不明白这里发生了什么，据我所知，一切都正常，但当我点击链接时，什么都没有发生这里是JSFIDLE的链接编辑：还发现我的代码似乎不起作用。我在遵循奥伯林提供的方向。但我想我可能把CSS搞砸了。不知道最初如何隐藏其他的并使其可见。任何帮助都将不胜感激 &l

我正在尝试使用jquery实现滑动门效果。我已经在JSFIDLE中对其进行了模拟，并且在那里工作正常。我的问题是，当我在本地运行它时，什么都不起作用。我已经在本地下载并链接到jquery库，我还有一个项目，我甚至链接到API，它工作得很好。我不明白这里发生了什么，据我所知，一切都正常，但当我点击链接时，什么都没有发生

这里是JSFIDLE的链接

编辑：还发现我的代码似乎不起作用。我在遵循奥伯林提供的方向。但我想我可能把CSS搞砸了。不知道最初如何隐藏其他的并使其可见。任何帮助都将不胜感激

<!doctype html>
<html>
<head>
<title>DBKustoms</title>
<link rel="stylesheet" href="./css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">    </script>
<script src="./js/include.js"></script>

</head>
<body>

<div id="menu-container">
    <div id="cover"></div>
    <div id="menu-home" class="menu"></div>
    <div id="menu-contact" class="menu">contact</div>
    <div id="menu-services" class="menu"></div>
    <div id="menu-photo" class="menu"></div>
</div>


<div id="buttons">
    <div id="home" class="menu-button">Home</div>
    <div id="contact" class="menu-button">Contact</div>
    <div id="services" class="menu-button">Services</div>
    <div id="photo" class="menu-button">Photo</div>
</div>

</body>
</html>

还有JS

$('.menu-button').click(function() {
    var cMenuButton = $(this);
    var cMenuID = cMenuButton.attr('id');

    var coverHeight = $('#cover').height();
    var cVisibleMenu = $('.menu:visible');
    var cVisibleHeight = cVisibleMenu.height();

    $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() {
        $('.menu').hide();
        $('#menu-' + cMenuID).show();

        var newMenuHeight = $('#menu-' + cMenuID).height();
        var coverHeight = $('#cover').height();

        $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear');
    }); 
});

确保将您的代码放入

文档中。准备就绪

。在JSFIDLE的左侧有一个下拉列表，其中有选项onDomReady，它为您包装代码。在本地您不需要，因此它可以在JSFIDLE上工作

$(function(){

  // code here
})

您需要包装jquery内容，以便它在DOM就绪后加载

$(function(){
    // your js here
})

JSFIDLE正在为您做这件事。您在本地遇到的问题是，javascript在加载文档之前运行，因此当选择器进行选择时，没有可选择的内容。如果在DOM就绪后运行，则它可以正常选择页面上的HTML元素。

这很有意义。对不起，我对这一切都是新手。如果这有助于解决您的问题，请标记为已回答。谢谢

$(function(){
    // your js here
})