Question

我有一系列文本链接可以切换div元素的可见性。文本链接的样式看起来像按钮，当div可见或不可见时，文本正在被更改。

问题在于，当按下第一个链接时，它会切换它自己的div加上所有其他隐藏div的可见性，所需要的是每个链接切换它自己的div的可见性。

我的问题是，仅使用一个函数解决此问题的最佳方法是什么。以下是我的代码。谢谢！

这里也可以测试代码：

HTML：

    <div>
        <a href="#" class="show_hide" id="plus">See all</a>
    </div>  

    <div class="slidingDiv" style="display: block;">

          <h2>Content One</h2>
    </div>

    <div>
        <a href="#" class="show_hide" id="plus">See all</a>
    </div>  

    <div class="slidingDiv" style="display: block;">

          <h2>Content Two</h2>
    </div>

JS：

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       $(".slidingDiv").slideDown(
         function(){
           $("#plus").text("Hide all")
         }
       );
   },function(){
       $(".slidingDiv").slideUp(
       function(){
           $("#plus").text("See all")
       }
       );
   });
});

CSS：

.show_hide {
  display: none;
}

Answer 1

已经弃用并删除了接受两个回调的toggle()版本，因此您必须使用click来执行此类操作

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').on('click', function(e){
       e.preventDefault();

       var self    = this,
           sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
               $(self).text(function(_,txt) {
                    return txt == "Hide all" ? "See all" : "Hide all";
               });
           });
    });
});

FIDDLE

请注意仅使用课程（ID必须是唯一的）和this关键字

如何分别切换几个div的可见性

1 个答案: