Question

我正在尝试为我的网站制作一个show hide div功能。但我有多个show hide按钮有一个问题。所以问题是，当我点击容器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();                
    });    
});

当用户点击容器show div中的show button时，我只想显示这个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();

        });

    });

show hide div jQuery

3 个答案:

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