индивидуальный переключатель скрыть / показать и переключить все скрыть / показать не взаимодействует должным образом. Любой совет? (jquery)

#jquery #toggle

#jquery #переключить

Вопрос:

Я создал фильтр для небольшого рабочего проекта, и последняя ошибка, которую мне нужно решить, — это проблема со скрытием / отображением. Когда я показываю часть аннотации, щелкая заголовок и используя кнопку позже, кнопка показывает все аннотации, но она не скроет их все при втором щелчке. Знаете ли вы, как изменить код, чтобы он работал правильно? Заранее благодарю вас!

Показать фрагмент кода

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

Развернуть фрагмент

1. Он правильно скрывает все три аннотации ‘Ipsum’ в моем браузере, как я думаю, так и должно быть. Аннотации ‘Lorem’ не скрыты (если вы это имели в виду), поскольку вы только переключаете show / hide classes на аннотации с anotace помощью класса. Кстати, я предлагаю использовать только show либо hide класс, либо класс. Итак: убедитесь, что ваши аннотации видны по умолчанию, и заставьте hide класс переопределить это или наоборот.

Ответ №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 and then 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>

Развернуть фрагмент