individual toggle hide/show 和 toggle all hide/show 不能正常配合。任何提示？ (jquery)

Question

我为小工作项目制作了过滤器，我需要解决的最后一个错误是 hide/show 问题。当我通过单击 header 显示一些注释并稍后使用该按钮时，该按钮显示所有注释，但它不会在第二次单击时将它们全部隐藏。您知道如何更改代码以使其正常工作吗？提前致谢！

/* 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;
        }

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

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

});

这只会 show/hide 那些 shown/hidden。
因此，如果您单击 Lorem 中的 1 个，然后单击 Show 按钮，则其余 2 个将切换。

演示

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

individual toggle hide/show 和 toggle all hide/show 不能正常配合。任何提示？ (jquery)

individual toggle hide/show and toggle all hide/show doesnt cooparate properly. Any tip? (jquery)

jquery

toggle