单击具有特定类或ID的div时显示和隐藏内容

Question

我有一个4 div，它们彼此叠放。 当我单击一个给定的div时，我希望它在其下方和其他三个div上方显示一个内容部分。 当我再次单击div时，它应该隐藏与其关联的内容部分。 我当前的代码可以在单击时显示内容，但是当我再次单击div时，找不到关于如何隐藏该内容的任何信息。

这是我的代码

的HTML

                <div class="dropItem wow fadeInLeft">Nature <b class="caret"></b></div>
                <div id="show">
                    <p>Some text here</p>
                </div>

                <div class="dropItem2 wow fadeInLeft">Discovery <b class="caret"></b></div>
                <div id="show2">
                    <p>Some text here</p>
                </div>

                <div class="dropItem3 wow fadeInLeft">Perspective <b class="caret"></b></div>
                <div id="show3">
                    <p>Some text here</p>
                </div>

                <div class="dropItem4 wow fadeInLeft">Mindfullness <b class="caret"></b></div>
                <div id="show4">
                    <p>Some text here</p>
                </div>

            </div>
        </div><!--end about column-->

Java脚本

$(document).ready(function(){
    //hide content sections at first
    $("#show").hide();
    $("#show2").hide();
    $("#show3").hide();
   $("#show4").hide();

 //display each content section when corresponding div is clicked
    $(".dropItem").click(function(){
        $("#show").show();
    });

    $(".dropItem2").click(function(){
       $("#show2").show();
    });

    $(".dropItem3").click(function(){
        $("#show3").show();
     });

     $(".dropItem4").click(function(){
         $("#show4").show();
      });

});

的CSS

.dropItem, .dropItem2, .dropItem3, .dropItem4 {
 width: 100%;
 height: 25%;
 padding-top: 4%;
 text-align: center;
 border-top: 1px solid #000;
 font-weight: bold;
}

.caret {
 color: teal;
}

#show, #show2, #show3, #show4 {
 width: 100%;
 height: 250px;
 background-color: teal;
 color: #FFFFFF;
 border: 1px solid teal;
}

链接到网站，例如http://jackloudphoto.com/

Answer 1

您可以使用这三种解决方案来完成此操作。

首先，好主意是将其包装到一个div作为框中，因为您需要定义项目边框。

解决方案一

我之所以这样，是因为无论div盒中的内容div有多深。 如果您更改框结构，例如。 您无需更改js代码，因为一切都会正常进行。

的HTML

<!-- solution one -->
<div class="box">
  <div class="box-header dropItem wow fadeInLeft">Nature <b class="caret"></b>
  <div class="box-content">
    <p>Some text here</p>
  </div>
</div>

JS

// solution one
$('.box .box-header').click(function(e) {
    $(this).closest('.box').find('.box-content').toggle();
});

解决方案二

它类似于您的代码。 您需要获取要显示的ID。 为此，可以像示例中一样使用HTML5 Data属性。 但是，如果您需要更改结构，则可能还需要更改js代码。

的HTML

<!-- solution two -->
<div class="box2">
  <div class="box-header2 dropItem wow fadeInLeft" data-box-id="2">Nature <b class="caret"></b>
  <div class="box-content2 item-2">
    <p>Some text here 222</p>
  </div>
</div>

JS

// solution two
$('.box2 .box-header2').click(function(e) {
    var id = $(this).data('box-id');
  $('.item-'+id).toggle();
});

解决方法三

是没有短切换功能的解决方案之一。

的HTML

<!-- solution three -->
<div class="box3">
  <div class="box-header3 dropItem wow fadeInLeft">Nature <b class="caret"></b>
  <div class="box-content3 item-3">
    <p>Some text here 3333</p>
  </div>
</div>

JS

$('.box3 .box-header3').click(function(e) {
    var $content = $(this).closest('.box3').find('.box-content3');
  if($content.is(':hidden')) {
    $content.show();
  }
  else {
    $content.hide();
  }
});

我更喜欢一种解决方案，但有时使用两种解决方案。 取决于对您有利的事物。

JS演示

Answer 2

快速简便的答案：

var one = -1,
    two = -1,
    three = -1,
    four = -1;


     //hide content sections at first
     $("#show").hide();
     $("#show2").hide();
     $("#show3").hide();
     $("#show4").hide();

     //display each content section when corresponding div is clicked
     $(".dropItem").click(function(){
         if(one == -1)
         $("#show").show();
         else
          $("#show").hide();

          one *= -1;
     });

     $(".dropItem2").click(function(){
        if(two == -1)
         $("#show2").show();
         else
          $("#show2").hide();

          two *= -1;
     });

     $(".dropItem3").click(function(){
         if(three == -1)
         $("#show3").show();
         else
          $("#show3").hide();

          three *= -1;
     });

     $(".dropItem4").click(function(){
         if(four == -1)
         $("#show4").show();
         else
          $("#show4").hide();

          four *= -1;
     });