Question

我是一个真正的javascript新手，在我的学习中寻找一些指示 - 不是作业，也不是商业上的。

我在这里有一个函数，它显示了由于函数的前两行而隐藏的元素。我首先点击标题，然后出现2个隐藏的div，这正是我想要发生的事情。但是，现在当我使用第二个函数时，它不会返回它的windown onload状态。为什么是这样？有没有更好的方法来实现这一目标？

第一功能

  $(window).ready(function(){
         $('.miniC').css("display", "none");
      $('.miniI').css("display", "none");
    $(".heading").click(function(){
      $('.miniC').slideDown();
      $('.miniI').slideDown();

      $('.miniC').show();
      $('.miniI').show();

    });
  });

第二功能（反向）

  $(window).ready(function(){
    $(".hideOut").click(function(){
      $('.miniC').slideUp();
      $('.miniI').slideUp();

      $('.miniC').hide();
      $('.miniI').hide();

    });
  });

提前致谢，我们非常感谢您对优秀阅读材料的任何提及。

*更正了缺失的结束语 - 这是我在Stack Overflow中输入错误的错误 - 抱歉！ *

Answer 1

因为slideUp()和hide()写在点击事件中。因此，它不会触发窗口准备，而只会onclick $(".hideOut")。

Answer 2

您似乎想要切换元素的可见性，并且因为您已经滑动它，为什么不使用slideToggle：

$(".miniC").css("display", "none");
$(".miniI").css("display", "none");
$(".heading").click(function () {
    $(".miniC").slideToggle();
    $(".miniI").slideToggle();
});

Example

Answer 3

您不应该致电.hide()和.show() - 它们将作为幻灯片功能的一部分进行处理。但是，您在幻灯片播放后立即调用它们，但这需要一段时间才能完成（默认为400毫秒），这意味着.hide()会在.slideUp()完成之前触发。

Answer 4

在问题范围之外，但仍然适用。

 $('.miniC').css("display", "none");
 $('.miniI').css("display", "none");

这部分页面功能可能应该在CSS中，这将导致浏览器正确呈现页面的初始颜色。在您的情况下，浏览器绘制“miniC”和“miniI”元素，然后您的jQuery代码将CSS显示属性更新为单独的“none”。触发页面的两次额外重绘。因此，基本上使用jQuery代码，您可以将页面绘制三次，以获得可以通过单个绘制实现的效果。

然后像查理所说的那样为点击添加一个监听器。

$(".heading").click(function () {
    $(".miniC").slideToggle();
    $(".miniI").slideToggle();
});

Answer 5

你的第一个功能中有一个拼写错误。该行中缺少单引号：

$('.miniC).show();

反转onClick事件

5 个答案: