jQuery: 如何使用 slideToggle 函数隐藏 DIV

Question

我需要修改以下脚本。当点击 .toggle1 并显示 .area1 时，我需要隐藏 .area1 并仅显示 .area2，当 .toggle2 被点击时。有任何想法吗？谢谢！

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle1">btn 1</div>
<div class="toggle2">btn 2</div>

<div class="area1" style="display:none;">Hidden 1</div>

<div class="area2" style="display:none;">Hidden 2</div>

Answer 1

给你，你只需要 .hide 点击函数中的相应 textarea

查看下面的演示

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
    $(".area2").hide();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    $(".area1").hide();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle1">btn 1</div>
<div class="toggle2">btn 2</div>

<div class="area1" style="display:none;">Hidden 1</div>

<div class="area2" style="display:none;">Hidden 2</div>

Answer 2

假设您的意思是点击 toggle1 只会在 area1 上回答您的问题，反之亦然

$(function() {
  $(".toggle1").click(function() {
    $(".area1").slideToggle();
        $(".area2").hide();
    return false;
  });
});

$(function() {
  $(".toggle2").click(function() {
    $(".area2").slideToggle();
    $(".area1").hide();
    return false;
  });
});`

jQuery: 如何使用 slideToggle 函数隐藏 DIV

jQuery: How to hide DIV with slideToggle function

jquery

hide

slidetoggle