Question

我有标题和菜单。目标是点击显示＆＃39;标题中的按钮将使用slideUp隐藏标题，并使用slideDown显示菜单。

在菜单中，有一个＆＃39;隐藏＆＃39;隐藏菜单并再次显示标题的按钮（再次使用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");
  });
});

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

有人知道为什么会这样，我的代码出错了吗？

Answer 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>

Answer 2

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

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

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

Answer 3

您可以使用 addClass()和removeClass()轻松完成此操作。不需要使用复杂的方法，因为这可以用这个来完成。这有两个方面：

<强> 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>

Answer 4

使用bellow代码段

$(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)方法即可使其正常工作。

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

4 个答案: