單擊具有特定類或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;
     });