JQuery：slideDown() 不会第二次覆盖 hide()答案

【问题标题】：JQuery: slideDown() wont overwrite hide() a 2nd timeJQuery：slideDown() 不会第二次覆盖 hide()
【发布时间】：2017-04-24 06:46:33
【问题描述】：

我有一个标题和一个菜单。目标是单击标题中的“显示”按钮，该按钮将使用 slideUp 隐藏标题，并使用 slideDown 显示菜单。

在菜单中，有一个“隐藏”按钮，可以隐藏菜单并再次显示标题（再次使用 slideUp 和 slideDown）。

还有一个.hide-for-mobile类隐藏了每次都必须删除和替换的菜单元素。

在此处查看我的代码：https://jsfiddle.net/uy9omboz/6/

$(".show").click(function() {
   $(".header").hide();
   $(".menu").hide().removeClass("hideme").slideDown(400);
});

$(".hide").click(function() {
  $(".header").slideDown(400);
  $(".menu").slideUp(400).delay(400).queue(function(next) {
      $(this).addClass("hideme");
  });
});

菜单第一次正确显示和隐藏，但如果我再次单击显示它不再显示。 .hide() 提供的内联样式 display: none 似乎不再被 .slideDown() 删除。

有谁知道这是为什么以及我的代码哪里出错了？

【问题讨论】：

标签： jquery css

【解决方案1】：

你需要像下面这样使用toggleClass():-

$(".menu").slideDown(400).delay(400).toggleClass("hide-for-mobile");

工作示例：-

$(function() {
  $(".show").click(function() {
    $(".header").hide();
    $(".menu").slideDown(400).delay(400).toggleClass("hide-for-mobile");
  });
  $(".hide").click(function() {
    $(".header").slideDown(400);
    $(".menu").slideDown(400).delay(400).toggleClass("hide-for-mobile");
  });
});

.header {
  background-color: black;
  color: white;
  padding: 20px;
}

.menu {
  background-color: green;
  color: white;
  padding: 20px;
  height: 200px;
}

.hide-for-mobile {
  display: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <a class="show">Show</a>
</div>

<div class="menu hide-for-mobile">
  <a class="hide">Hide</a>
</div>

【讨论】：

MeltingDog 很高兴为您提供帮助:):)

【解决方案2】：

你不需要队列方法来与 jquery 方法进行链接。

 $(".menu").slideUp(400).delay(400).addClass("hide-for-mobile");

https://jsfiddle.net/uy9omboz/7/

【讨论】：

【解决方案3】：

您可以使用 addClass() 和 removeClass() 轻松做到这一点。无需使用复杂的方法，因为可以通过 this 完成。这有两种工作方式：

1.点击.show菜单类slides down和类hide-for-mobile是 removed.

2。现在点击菜单中的.hide 类.hide-for-mobile 是 added 和标题是 shown up。

$(function() {

  $(".show").click(function() {
    $(".header").hide();
    $(".menu").slideDown(400).removeClass("hide-for-mobile");
  });

  $(".hide").click(function() {
    $(".header").slideDown(400);
    $(".menu").slideUp(400).addClass("hide-for-mobile");

  });

});

这是一个描述上滑下滑显示的工作示例隐藏：

$(function() {

  $(".show").click(function() {
    $(".header").hide();
    $(".menu").slideDown(400).removeClass("hide-for-mobile");
  });

  $(".hide").click(function() {
    $(".header").slideDown(400);
    $(".menu").slideUp(400).addClass("hide-for-mobile");

  });

});

.header {
  background-color: black;
  color: white;
  padding: 20px;
}

.menu {
  background-color: green;
  color: white;
  padding: 20px;
  height: 200px;
}

.hide-for-mobile {
  display: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <a class="show">Show</a>
</div>

<div class="menu hide-for-mobile">
  <a class="hide">Hide</a>
</div>

【讨论】：

【解决方案4】：

使用下面的 sn-p

$(function() {
 $(".show").click(function() {
    $(".header").hide();
    $(".menu").slideDown(400).toggleClass("hide-for-mobile");
 });
 $(".hide").click(function() {
    $(".header").slideDown(400);
    $(".menu").slideDown(400).toggleClass("hide-for-mobile");
 });
});

在您的代码中，您使用了.hide()，然后使用了不需要的slideDown()，这个问题是由于queue(function(next) 这个方法造成的。如果您想使用您的代码，只需删除 queue(function(next) 方法即可使其工作。

【讨论】：