JQuery:slideDown（）不会第二次覆盖hide（）

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

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

还有一个

.hide for mobile

类，用于隐藏每次必须删除和替换的菜单元素

在这里查看我的代码：

菜单第一次正确显示和隐藏，但如果再次单击“显示”，它将不再显示。

.hide（）

提供的内联样式

display:none

似乎不再被

.slideDown（）

删除

---

有人知道这是为什么，我的代码哪里出错了吗？

您需要像下面那样使用

toggleClass（）

：-

工作示例：-

$（函数（）{
$（“.show”）。单击（函数（）{
$（“.header”）.hide（）；
$（“.menu”）.slideDown（400）.delay（400）.toggleClass（“为移动设备隐藏”）；
});
$（“.hide”）。单击（函数（）{
$（“.header”）。向下滑动（400）；
$（“.menu”）.slideDown（400）.delay（400）.toggleClass（“为移动设备隐藏”）；
});
});
.header{
背景色：黑色；
颜色：白色；
填充：20px；
}
.菜单{
背景颜色：绿色；
颜色：白色；
填充：20px；
高度：200px；
}
.隐藏手机{
显示：无！重要；
}

显示
隐藏
u不需要队列方法来使用jquery方法进行链接

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

您可以使用
addClass（）
和
removeClass（）
轻松实现这一点。无需使用复杂的方法，因为这可以通过以下两种方式完成：

1。单击
.show
菜单类
向下滑动
，然后单击类
隐藏移动设备
已删除

$(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");

  });

});

2。现在，单击菜单中的
.hide
，将显示类
.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");

  });

});

下面是一个描述slideup slidedown显示的工作示例
隐藏：


$（函数（）{
$（“.show”）。单击（函数（）{
$（“.header”）.hide（）；
$（“.menu”）.slideDown（400）.removeClass（“为移动设备隐藏”）；
});
$（“.hide”）。单击（函数（）{
$（“.header”）。向下滑动（400）；
$（“.menu”）.slideUp（400）.addClass（“为移动设备隐藏”）；
});
});
.header{
背景色：黑色；
颜色：白色；
填充：20px；
}
.菜单{
背景颜色：绿色；
颜色：白色；
填充：20px；
高度：200px；
}
.隐藏手机{
显示：无！重要；
}

显示
隐藏
使用下面的代码片段

$(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）
方法就可以了。
MeltingDog很高兴帮助您：）：）
$(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");
 });
});