显示和隐藏内容的jQuery函数

Question

所以我有四个盒子，每个盒子都有一个数据属性，我用它来定位我显示和隐藏的其他四个盒子。我有点像我想要的功能。

但请说我点击one框然后显示two框。我想要的只是最后点击显示的框，而其他所有框都隐藏。如果单击框one，则会显示该框，如果再次单击它将隐藏。

这是我到目前为止所做的：

$(document).ready(function(){
  $(".click").click(function(){
  var current_sec = $(this).data("section");
    
    if($(this).hasClass("clicked")){
      $("#" + current_sec).removeClass("show");
      $(this).removeClass("clicked");
    } else{    
      $(this).addClass("clicked");
      $("#" + current_sec).addClass("show");
    }
    });  
});

.click{
  display: inline-block;
  height: 50px;
  width: 50px;
  margin: 0 20px;
  cursor: pointer;
}

#one{
  background-color: blue;
}

#two{
  background-color: yellow;
}

#three{
  background-color: red;
}

#four{
  background-color: orange;
}

.sections{
  width: 500px;
  font-size: 18px;
  max-height: 0px;
  overflow: hidden;
}

.show{
  max-height: 1000px;
}

#section_1{
  background-color: blue;
}

#section_2{
  background-color: yellow;
}

#section_3{
  background-color: red;
}

#section_4{
  background-color: orange;
}

<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>

<div class="sections" id="section_1">
  <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<div class="sections" id="section_2">
  <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<div class="sections" id="section_3">
  <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<div class="sections" id="section_4">
   <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Answer 1

每次清除框都需要删除show类;其次，因为您需要show/hide，还需要删除clicked条件中的else类：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".click").click(function() {
    $('.sections.show').removeClass('show');
    var current_sec = $(this).data("section");
    if ($(this).hasClass("clicked")) {
      $("#" + current_sec).removeClass("show");
      $(this).removeClass("clicked");
    } else {
      $('.click.clicked').removeClass('clicked');
      $(this).addClass("clicked");
      $("#" + current_sec).addClass("show");
    }
  });
});

＆＃13;

.click {
  display: inline-block;
  height: 50px;
  width: 50px;
  margin: 0 20px;
  cursor: pointer;
}

#one {
  background-color: blue;
}

#two {
  background-color: yellow;
}

#three {
  background-color: red;
}

#four {
  background-color: orange;
}

.sections {
  width: 500px;
  font-size: 18px;
  max-height: 0px;
  overflow: hidden;
}

.show {
  max-height: 1000px;
}

#section_1 {
  background-color: blue;
}

#section_2 {
  background-color: yellow;
}

#section_3 {
  background-color: red;
}

#section_4 {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>

<div class="sections" id="section_1">
  <div class="box"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
    magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
    neque.
  </p>
</div>

<div class="sections" id="section_2">
  <div class="box"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
    magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
    neque.
  </p>
</div>

<div class="sections" id="section_3">
  <div class="box"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
    magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
    neque.
  </p>
</div>

<div class="sections" id="section_4">
  <div class="box"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
    magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
    neque.
  </p>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用{{3}从<{1}}和click 删除活动类 当前 选择器：

sections

见下面的演示：

＆＃13;

＆＃13;

$(".sections").not(this).removeClass("show");
$('.click').not(this).removeClass("clicked");

＆＃13;

$(document).ready(function() {
  $(".click").click(function() {
    var current_sec = $(this).data("section");

    // remove active from other tabs
    $(".sections").not(this).removeClass("show");
    $('.click').not(this).removeClass("clicked");

    if ($(this).hasClass("clicked")) {
      $("#" + current_sec).removeClass("show");
      $(this).removeClass("clicked");
    } else {
      $(this).addClass("clicked");
      $("#" + current_sec).addClass("show");
    }
  });
});

＆＃13;

.click {
  display: inline-block;
  height: 50px;
  width: 50px;
  margin: 0 20px;
  cursor: pointer;
}

#one {
  background-color: blue;
}

#two {
  background-color: yellow;
}

#three {
  background-color: red;
}

#four {
  background-color: orange;
}

.sections {
  width: 500px;
  font-size: 18px;
  max-height: 0px;
  overflow: hidden;
}

.show {
  max-height: 1000px;
}

#section_1 {
  background-color: blue;
}

#section_2 {
  background-color: yellow;
}

#section_3 {
  background-color: red;
}

#section_4 {
  background-color: orange;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试将此添加到您的其他人作为第一行，从之前显示的任何部分中删除show类。

//remove clicked from the previously clicked elements
$('.click.clicked').removeClass('clicked');
//remove show from the reviously shown sections
$('.sections.show').removeClass('show');

Answer 4

您可以使用直接CSS显示和隐藏。没有必要的自定义类。这应该是你正在寻找的。

＆＃13;

＆＃13;

$(document).ready(function(){
  $(".click").click(function(){
  var current_sec = $(this).data("section");
      // hide all sections first
      $('.sections').css("display", "none");

      // find the clicked section id
      var clickedId = $(this).attr('data-section');
 
      // show clicked section
      $('#' + clickedId).css("display", "");
    });  
});

＆＃13;

.click{
  display: inline-block;
  height: 50px;
  width: 50px;
  margin: 0 20px;
  cursor: pointer;
}

#one{
  background-color: blue;
}

#two{
  background-color: yellow;
}

#three{
  background-color: red;
}

#four{
  background-color: orange;
}

.sections{
  width: 500px;
  font-size: 18px;
  overflow: hidden;
}

.show{
  max-height: 1000px;
}

#section_1{
  background-color: blue;
}

#section_2{
  background-color: yellow;
}

#section_3{
  background-color: red;
}

#section_4{
  background-color: orange;
}

＆＃13;

<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>

<div class="sections" id="section_1">
  <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<div class="sections" id="section_2">
  <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<div class="sections" id="section_3">
  <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<div class="sections" id="section_4">
   <div class="box"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;