解决方案一

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-->

的Javascript

$(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有多深。如果你改变箱子结构，例如。你不需要改变你的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数据属性，如在示例中。但是如果你需要改变你的结构，你可能也需要改变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();
  }
});

我更喜欢解决方案，但有时会使用解决方案2。取决于你的友情。

JS DEMO

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;
     });

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

2 个答案:

解决方案一

解决方案二

解决方案三