单独切换隐藏/显示和切换全部隐藏/显示不能正确地协调。有小费吗？（jquery）

Question

我为小工作项目做了过滤器，我需要解决的最后一个bug是隐藏/显示问题。当我通过点击标题显示一些批注并稍后使用该按钮时，该按钮显示所有批注，但它不会在第二次点击时隐藏它们。你知道如何更改代码以使其正常工作吗？提前谢谢你！

null

/* toggle button all anotation*/

$('#makeVisible').on('click', function () {


    $(this).text($(this).text() == 'Show' ? 'Show' : 'Hide');

    $(".anotace").toggleClass("hide");
    $(".anotace").toggleClass("show");

    });


/*toggle one anotation to click its header */

        $('.nazev').click(function(){
          $(this).next(".anotace").slideToggle();
    })

        .anotace {
          display: none;
        }


        .hide {
          display: none;
        }
        .show {
          display: block;
        }

html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<button id='makeVisible'> Show </button>


<div class='beseda'> 
        <div class="nazev">Lorem</div>
        <div class="anotace">Ipsum </div>
    </div>
    
<div class='beseda'> 
        <div class="nazev">Lorem</div>
        <div class="anotace">Ipsum</div>
    </div>

<div class='beseda'> 
        <div class="nazev">Lorem</div>
        <div class="anotace">Ipsum</div>
    </div>

null

Answer 1

您可以尝试如下所示:

$('#makeVisible').on('click', function() {
  var s = $(this).text() != 'Show'

  $(this).text(s ? 'Show' : 'Hide');

  if(s)
    $(".anotace:visible").slideToggle("show");
  else
    $(".anotace:not(:visible)").slideToggle("hide");

});

这将只显示/隐藏未显示/隐藏的内容。
因此，如果单击lorem中的1，然后单击show按钮，则其余的2将切换。

演示

null

/* toggle button all anotation*/

$('#makeVisible').on('click', function() {
  var s = $(this).text() != 'Show'

  $(this).text(s ? 'Show' : 'Hide');

  if(s)
    $(".anotace:visible").slideToggle("show");
  else
    $(".anotace:not(:visible)").slideToggle("hide");

});


/*toggle one anotation to click its header */

$('.nazev').click(function() {
  $(this).next(".anotace").slideToggle();
})

.anotace {
  display: none;
}

.hide {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<button id='makeVisible'>Show</button>


<div class='beseda'>
  <div class="nazev">Lorem</div>
  <div class="anotace">Ipsum </div>
</div>

<div class='beseda'>
  <div class="nazev">Lorem</div>
  <div class="anotace">Ipsum</div>
</div>

<div class='beseda'>
  <div class="nazev">Lorem</div>
  <div class="anotace">Ipsum</div>
</div>