jquery - 个别切换隐藏/显示和切换所有隐藏/显示不正确合作。任何提示？（jQuery）

Question

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

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

标签： jquerytoggle

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

});

这只会显示/隐藏那些未显示/隐藏的内容。
因此，如果您单击 1 个Lorem然后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>