显示隐藏 div jQuery

Question

我正在尝试为我的网站制作一个显示隐藏 div 功能。但是我对多个显示隐藏按钮有一个问题。所以问题是当我单击容器 div 中的显示按钮时，所有蓝色 div 都会自动显示。

你可以看到DEMO。

HTML：

<div class="container">
  <div class="div">
    <div id="hidediv">Hide</div>
  </div>
  <div class="test"></div>
  <div id="showdiv">Show</div>
  
</div>
<div class="container">
  <div class="div">
    <div id="hidediv">Hide</div>
  </div>
  <div class="test"></div>
  <div id="showdiv">Show</div>      
</div>

JavaScript：

$(document).ready(function() {
    $("#hidediv").hide();
    $('#showdiv').click(function() {
        $('.div').toggle("slide");
        $("#showdiv").hide();
        $("#hidediv").show();
            
    });
    $('#hidediv').click(function() {
        $('.div').toggle("slide");
        $("#hidediv").hide();
        $("#showdiv").show();                
    });    
});

当用户单击容器显示 div 中的显示按钮时，我只想显示这个 div。 我希望你能理解我。

Answer 1

首先你应该使用类而不是id。固定的 HTML 变为：

<div class="container">
    <div class="div">
        <div class="hidediv">Hide</div>
    </div>
    <div class="test"></div>
    <div class="showdiv">Show</div>
</div>

等等。这是最灵活的方法，因为现在您可以根据需要添加任意数量的可折叠容器，而无需更改 JS 代码。

Javascript 代码则可以（使用on 方法更有效地处理事件）：

$('.container').on('click', '.showdiv', function(e) {
    var $container = e.delegateTarget;
    $('.div', $container).toggle('slide');
    $('.showdiv', $container).hide();
    $('.hidediv', $container).show();
})
.on('click', '.hidediv', function(e) {
    var $container = e.delegateTarget;
    $('.div', $container).toggle("slide");
    $(".hidediv", $container).hide();
    $(".showdiv", $container).show();
});

演示：http://jsfiddle.net/1j32cwLg/

Answer 2

为每个容器创建不同的 ID 和函数，如下所示：

HTML：

<div class="container">
  <div class="div">
    <div id="hidediv">Hide</div>
  </div>
  <div class="test"></div>
  <div id="showdiv">Show</div>

</div>
<div class="container2">
  <div class="div2">
    <div id="hidediv2">Hide</div>
  </div>
  <div class="test2"></div>
  <div id="showdiv2">Show</div>
</div>

JS：

   $(document).ready(function() {
       //function for first container
        $("#hidediv").hide();
        $('#showdiv').click(function() {
                $('.div').toggle("slide");
                $("#showdiv").hide();
                $("#hidediv").show();

        });
     $('#hidediv').click(function() {
                $('.div').toggle("slide");
                $("#hidediv").hide();
                $("#showdiv").show();

        });
    //for second container
       $("#hidediv2").hide();
        $('#showdiv2').click(function() {
                $('.div2').toggle("slide");
                $("#showdiv2").hide();
                $("#hidediv2").show();

        });
     $('#hidediv2').click(function() {
                $('.div2').toggle("slide");
                $("#hidediv2").hide();
                $("#showdiv2").show();

        });
    });

CSS：

.container, .container2 {
  margin-top:40px;
  width:630px;
  height:190px;
  margin:0px auto;
  border:1px solid #d8dbdf;
}
.test,.test2 {
  float:left;
  width:250px;
  height:190px;
  background-color:red;
}
.div, .div2{
  float:left;
  width:630px;
  height:190px;
  background-color:blue;
  display:none;
  position:absolute;
}
#hidediv, #hidediv2{
  background:red;
}

例如：http://jsfiddle.net/usqeyckd/

Answer 3

不同的 id 是一个不错的选择，但如果你真的不想要，或者可能有很多 div，请使用以下：

HTML

<div class="container">
  <div class="hidediv">Hide</div>
  <div class="showdiv">Show</div>
</div>
<br />
<div class="container">
    <div class="hidediv">Hide</div>
  <div class="showdiv">Show</div>
</div>

JavaScript

  $(document).ready(function() {
     $(".hidediv").hide();
        $('.showdiv').click(function() {
                $(this).hide();
 $(this).parent(".container").children(".hidediv").show();

        });
     $('.hidediv').click(function() {
                $(this).hide();
      $(this).parent(".container").children(".showdiv").show();

        });

    });