Ранние DOM-элементы не скрываются при использовании эффектов с jQuery UI - PullRequest
Новая
       5

Ранние DOM-элементы не скрываются при использовании эффектов с jQuery UI

0 голосов
/ 05 июля 2018

Это продолжение моего предыдущего вопроса jQuery UI, скрывающий не вступивший в силу для ранних элементов DOM . Я почти только отредактировал это, но не хотел лишать законной силы принятый ответ от toffler. То, как я написал этот вопрос, технически не является ответом, но это не решает мою проблему.

Напомним, я хочу иметь возможность показывать и скрывать группы div с. Моя стратегия показа данной группы состоит в том, чтобы скрыть все группы (выбранные по классу), а затем отменить скрытие группы, которую я хочу (снова, выбранной по классу).

Ответ на мой первый вопрос предполагает использование hide() и show() / fadeIn() из пользовательского интерфейса jQuery и ядра jQuery. Когда я использую эти функции без аргументов, скрытие работает, как и ожидалось (доказано фрагментом ответа).

Проблема в том, что, когда я пытаюсь добавить тип эффекта обратно (то есть первый параметр hide() функция ), все снова прерывается; Фрагмент MCVE ниже. В частности, при скрытии и последующем отображении группы элементов ниже в DOM элементы, находящиеся над ним в DOM, остаются видимыми. Чтобы воспроизвести из только что загруженного фрагмента, попробуйте нажать «Показать группу B» после «Показать группу A». (Еще больше запутывает, нажимая «Показать группу B» второй раз , работает как положено.)

Интересно, связано ли это с внутренним обновлением DOM, которое было затронуто в jQuery UI - эффект скрытия диалога в Firefox - мерцание и jQuery UI вызывает перезагрузку iframe , но у меня нет отбивных JS, чтобы сказать для себя.

Что является причиной основного поведения здесь, и как я могу заставить это работать, все еще имея возможность использовать эффекты (и, возможно, другие параметры)? 

$(function() {
  $("#showAll").on("click", function() {
    $('.box').fadeIn();
  });

  $("#showA").on("click", function() {
    $('.box').hide('clip');
    $('.groupA').fadeIn();
  });

  $("#showB").on("click", function() {
    $('.box').hide('clip');
    $('.groupB').fadeIn();
  });
});
.box {
  border: 1px solid black;
}
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</head>
<body>
  <button id="showAll">Show all</button>
  <button id="showA">Show group A</button>
  <button id="showB">Show group B</button>

  <div id="aOne" class="box groupA">
    <h4>A1</h4>
  </div>
  <div id="aTwo" class="box groupA">
    <h4>A2</h4>
  </div>

  <div id="bOne" class="box groupB">
    <h4>B1</h4>
  </div>
  <div id="bTwo" class="box groupB">
    <h4>B2</h4>
  </div>
</body>
</html>

1 Ответ

0 голосов
/ 06 июля 2018

Дело в том, что .hide() ожидает, что вещи будут видимы, и я думаю, что это делает их видимыми, чтобы затем обрезать их.

Позволяет скрывать только видимые элементы: $(".box:visible")

$(function() {
  $(".tools button").click(function(e) {
    e.preventDefault();
    var btn = $(this);
    $(".box:visible").hide("clip", function() {
      switch (btn.attr("id")) {
        case "showAll":
          $(".box").show();
          break;
        case "showA":
          $(".A").show();
          break;
        case "showB":
          $(".B").show();
          break;
      }
    });
  });
});
.box {
  border: 1px solid black;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<div class="tools">
  <button id="showAll">Show all</button>
  <button id="showA">Show group A</button>
  <button id="showB">Show group B</button>
</div>
<div id="aOne" class="box A">
  <h4>A1</h4>
</div>
<div id="aTwo" class="box A">
  <h4>A2</h4>
</div>

<div id="bOne" class="box B">
  <h4>B1</h4>
</div>
<div id="bTwo" class="box B">
  <h4>B2</h4>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...