Почему мой скрипт задерживает скрытие элемента? - PullRequest
Новая
       2

Почему мой скрипт задерживает скрытие элемента?

0 голосов
/ 10 июля 2020

Я пытаюсь сделать какую-то вкладку div. У меня есть 4 кнопки, и по умолчанию я показываю первый div. Теперь я пытаюсь скрыть тот div, который открывается, когда я нажимаю другой. Пробовали разные идеи, но, похоже, ни одна из них не работает. Я разделил кнопки и содержимое на 2 блока:

My HTML snippet: 

<div class="button wrapper">
   <button class="btn btn-1" rel="btn-1" href="">Horeca</button>
   <button class="btn btn-2" rel="btn-2" href="">Winkel</button>
</div>
<div class="content-wrapper">
   <div class="mycontent-1" style="display: block;">
      <h1>Horeca</h1>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ratione, ullam?
         Aspernatur deserunt ducimus ex explicabo iste maiores molestiae odio pariatur rem vero.
         Distinctio dolor error placeat quos sunt voluptatum!
      </p>
   </div>
   <div class="mycontent-2" style="display: none;">
     <h1>Winkel</h1>
     <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ratione, ullam?
        Aspernatur deserunt ducimus ex explicabo iste maiores molestiae odio pariatur rem vero.
        Distinctio dolor error placeat quos sunt voluptatum!
     </p>
</div>

jquery Snippet: 

$(document).ready(function() {
    $(".btn-1").click(function(){
      $(".mycontent-1").fadeToggle(function(){
         $(this).siblings().hide();
            });
      });
    $(".btn-2").click(function(){
      $(".mycontent-2").fadeToggle(function(){
         $(this).siblings().hide();
            });
      });
});

Для некоторых своего рода причина, по которой div, который должен скрывать, остается в DOM в течение нескольких миллисекунд, прежде чем он исчезнет. Я хочу, чтобы он плавно перешел в следующий div. Итак, когда исчезает первый div fini sh, я хочу начать постепенное исчезновение содержимого нажатой кнопки. Должен ли я сделать что-то вроде функции успеха, чтобы это сработало?

Ответы [ 2 ]

0 голосов
/ 10 июля 2020

Прежде всего, приятель, вам не хватает тега закрытия div, чтобы закрыть div секунд с помощью моего class="mycontent-2". Во-вторых, все, что вам нужно, это скрыть div, не беспокойтесь о его содержимом, потому что они уже включены в него и скроются вместе с ним. В-третьих, вам нужно скрыть все остальные элементы, прежде чем пытаться показать другой. В общем, попробуйте это в своем jquery коде: 

$(document).ready(function() {
    $(".btn-1").click(function(){
        $(".mycontent-2").hide("slow", function(){
            $(".mycontent-1").show();
        });
    });
    $(".btn-2").click(function(){
    $(".mycontent-1").hide("slow", function(){
            $(".mycontent-2").show();
        });
    });
});
0 голосов
/ 10 июля 2020

Я думаю, вы усложняете это событием fadeToggle, работающим с братьями и сестрами. Попробуйте это ( fiddle ): 

$(document).ready(function() {
    $(".btn-1").click(function() {
      $(".mycontent-1").siblings().hide();
      $(".mycontent-1").fadeIn();
    });
    $(".btn-2").click(function() {
      $(".mycontent-2").siblings().hide();
      $(".mycontent-2").fadeIn();
    });
});

Итак, здесь для каждого нажатия кнопки мы скрываем братьев и сестер и исчезаем в желаемом div.

Вы также может быть немного более кратким и использовать только одно событие, которое использует подстановочные знаки селектора, проверяет номер кнопки и работает с правильным номером div ( fiddle ). Это будет работать с несколькими кнопками / div, которые соответствуют вашим соглашениям об именах. 

$(document).ready(function() {
    // on click of a button with "rel" attribute that starts with "btn-"
    $("[rel^=btn-]").click(function() {
      var n = $(this).attr("rel").split("-")[1]  // get the number
      $(`.mycontent-${n}`).siblings().hide();
      $(`.mycontent-${n}`).fadeIn();
    });
});
...