Question

帮助！我正在尝试处理内容缩小到0，更改，然后再次滑动到新内容的正确大小的项目。我已经在JSFiddle上正常工作，但它不能在我的网站上运行!!我在两个地方都使用完全相同的jQuery，CSS和HTML。我 DID 记得在我的网站上调用当前版本的jQuery（jquery-2.2.1.min.js）。

这是关于JSFiddle的工作副本：

https://jsfiddle.net/sy7e7hge

这是我网站上的非工作副本：

http://goo.gl/3iVn2E

鼠标悬停更改在两者上都运行正常，但点击更改大小在我的网站上没有任何作用！

这是stackoverflow片段（也可以）！

function change() {
  $("#inner").animate({height: "hide"});
  $('.content').delay(399).fadeOut(0);
  $("#inner").animate({height: "show"}, 1000);
};

$("#menu_home").click(function() {
  change();
  $('#home').fadeIn(0);
});

$("#menu_page01").click(function() {
  change();
  $('#page01').fadeIn(0);
});

$("#menu_page02").click(function() {
  change();
  $('#page02').fadeIn(0);
});

.content {
  position: relative;
  top: 0;
  left: 0;
}

#container {
  width: 500px;
  margin: 0 auto;
}

#outer {
  background: green;
  width: 500px;
  margin: 0 auto;
  padding: 30px 0 30px 15px;
}

#inner {
  background: orange;
  width: 500px;
  height: 0 auto;
  margin: 0 auto;
}

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

<div id="container">
    <div id="outer">
        <div id="inner">

      <div class="content" id="home">HOME<br>HOME<br>HOME</div>
      <div class="content" id="page01" style="display: none;">PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1<br>PAGE 1</div>
      <div class="content" id="page02" style="display: none;">PAGE 2<br>PAGE 2<br>PAGE 2<br>PAGE 2<br>PAGE 2<br>PAGE 2</div>
      
        </div>
    </div>
</div>

<br><br>

<div class="menu" id="menu_home" onmouseover="this.bgColor='black'; this.style.color='red'" onmouseout="this.bgColor='white'; this.style.color='black'">click to show home page</div>
<br><br>
<div class="menu" id="menu_page01" onmouseover="this.bgColor='black'; this.style.color='red'" onmouseout="this.bgColor='white'; this.style.color='black'">click to show page 1</div>
<br><br>
<div class="menu" id="menu_page02" onmouseover="this.bgColor='black'; this.style.color='red'" onmouseout="this.bgColor='white'; this.style.color='black'">click to show page 2</div>

我做错了什么？！我需要做些什么才能让它在我的网站上运行？

Answer 1

您需要将您网站的jQuery代码放在document.ready处理程序中。 jsFiddle自动执行此操作，因此它已经有效。试试这个：

function change() {
    $("#inner").animate({ height: "hide" });
    $('.content').delay(399).fadeOut(0);
    $("#inner").animate({ height: "show" }, 1000);
};

$(function() {
    $("#menu_home").click(function() {
        change();
        $('#home').fadeIn(0);
    });

    $("#menu_page01").click(function() {
        change();
        $('#page01').fadeIn(0);
    });

    $("#menu_page02").click(function() {
        change();
        $('#page02').fadeIn(0);
    });
});

Answer 2

移动代码的这一行：

<script type="text/javascript" src="resources/js.js"></script>

在结束</body>标记之前：

<script type="text/javascript" src="resources/js.js"></script>
</body>

你会没事的。

就像你拥有它一样，文档尚未构建，而inner之类的元素尚不存在，因此JavaScript代码不会将事件附加到它们。

注释

另一个script标记（jQuery）不需要文档中的任何特定元素来执行。因此，对于script标记，将其保留在head标记中是完全合理的。

其他人建议将代码包装在$(document).ready(function(){ .. })或$(function() { .. })中。这也有效。它使您的代码在稍微不同的时间执行。如果要以三种方式实现代码，则执行顺序为：

代码遵循我的建议
$(function() { .. })
$(document).ready(function(){ .. })

在某些情况下（1） - 或者在极少数情况下甚至（2） - 代码执行过早可能太早了，但在你的情况下方法（1）没问题：你可以尽快附加事件处理程序随着元素的创建。

其中（1）可能太快的例子是当你想获得一个元素的位置，重新定位它或调整它的大小，将焦点设置在另一个元素上时......等等/ p>

Answer 3

在查看了您的网站的源代码后，我发现您忘记在您的HTML中提及以下代码。请在document.ready块中添加以下代码，如下所示

$(document).ready(function(){

 function change() {
    $("#inner").animate({height: "hide"});
    $('.content').delay(399).fadeOut(0);
    $("#inner").animate({height: "show"}, 1000);
  };

  $("#menu_home").click(function() {
    change();
    $('#home').fadeIn(0);
  });

  $("#menu_page01").click(function() {
    change();
     $('#page01').fadeIn(0);
  });

  $("#menu_page02").click(function() {
    change();
    $('#page02').fadeIn(0);
  });
});

我的jQuery在JSFiddle中工作，但不在我的网站上！我做错了什么？

3 个答案:

注释