Question

我正在尝试使用一些附加功能创建一个简单的slideToggle。我有一个函数，可隐藏单击的div并切换功能以滑动其余的div。我在幻灯片切换时出错，当我尝试将剩余的div向上滑动时，隐藏的div就会消失。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="style.css">    
    <script type="text/javascript" src="jquery-3.4.0.js"></script>
</head>
<body>
    <h1>jQuery Effects</h1>
    <button>Click Me!</button>
    <hr>

    <div><h2>One</h2></div>
    <div><h2>Two</h2></div>
    <div><h2>Three</h2></div>

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

$("div").on("click", function(){
    $(this).fadeOut(1000, function() {
    });

});

$("button").on("click", function(){
    $("div").slideToggle("slow", function(){

    })
});

let y = $("h1").text();

$("div").mouseenter(function(){
    let x = $(this).text();
    $("h1").text(x)
});

$("div").mouseleave(function(){
    $("h1").text(y)
})

Answer 1

您应searched_value = random.randrange(0, 1000)更新您的信息，如下所示。

在button条件下，我检查了if中的任何一个为div时，它将隐藏visible，否则将显示所有div。

div

下面是完整的代码。我希望这就是你想要的。

我建议您为div使用一些css类，并为fadeIn和fadeOut使用这些类。在实际应用中，还可以有更多的div。

$("button").on("click", function() {
  if ($("div:visible").length > 0)
    $("div").fadeOut("slow");
  else
    $("div").fadeIn("slow");
});

$("div").on("click", function() {
  $(this).fadeOut(1000);
});

$("button").on("click", function() {
  if ($("div:visible").length > 0)
    $("div").fadeOut("slow");
  else
    $("div").fadeIn("slow");
});

let y = $("h1").text();

$("div").mouseenter(function() {
  let x = $(this).text();
  $("h1").text(x)
});

$("div").mouseleave(function() {
  $("h1").text(y)
})

jQuery-具有多个div和附加隐藏功能的简单slideToggle

1 个答案: