jQuery скрыть элемент по классу не скрывает все элементы - PullRequest
Новая
       4

jQuery скрыть элемент по классу не скрывает все элементы

0 голосов
/ 02 мая 2020

У меня проблема. Когда я скрываю все элементы с указанными c элементами только класса , за исключением , один из них скрыт. Я понятия не имею, почему это происходит.

, если я помещаю всплывающее окно где-то еще на странице, это работает. Я думаю, что это должно быть связано с css, но я не мог выяснить, какое свойство вызывает эту проблему.

Код 

      $('.scroll-nav-item').click(function() {
        $(this).find('.popup').show();
      });
      $('.close-popup').click(function() {
          $('.popup').hide();
      });
:root{
  --nav-height: 5rem;
  --one-page-minus-nav-height: calc(100vh - var(--nav-height));
  --scroll-nav-width: 80px;
  --bg-light: #f8f9fa;
  --bg-dark: #343a40;
  --bg-dark-hover: #606b76;
}

#scroll_nav{
  overflow: visible;
  position: absolute;
  left: 0;
  top: calc(var(--nav-height) + 10rem);
  width: var(--scroll-nav-width);
  background-color: rgba(255, 255, 255, 0.5);
}
.scroll-nav-item{
  display: flex;
  overflow: visible;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--bg-light);
  --offset: 5px;
  width: calc(var(--scroll-nav-width) - calc(var(--offset) / 2));
  height: calc(var(--scroll-nav-width) - var(--offset));
  margin: calc(var(--offset) / 2) calc(var(--offset) / 2) calc(var(--offset) / 2) 0;
  border: 2px solid var(--bg-light);
  background-color: var(--bg-dark);
  cursor: pointer;
}
.popup{
  position: absolute;
  left: var(--scroll-nav-width);
  cursor: auto;
  background-color: white;
  color: black;
}
.close-popup{
  cursor: pointer;
}
.scroll-nav-item:hover{
  background-color: var(--bg-dark-hover);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="background-color: #A3A3A3">
<!-- Scroll Navigation -->
  <div id="scroll_nav" class="d-none d-lg-block rounded-right" style="">
    <div class="scroll-nav-item rounded">
          open Popup
          <div class="popup" style="display: none; min-width: 600px">
            Popin around
          <span class="close-popup"><b>close</b></span>
      </div>
    </div>
    <div class="scroll-nav-item rounded">
      2
    </div>
    <div class="scroll-nav-item rounded">
      3
    </div>
    <div class="scroll-nav-item rounded">
      open popup
      <div id="pu1" class="popup" style="display:none; min-width: 600px">
        popin around
        <span class="close-popup"><b>close</b></span>
      </div>
    </div>
</div>
<body>

Как видите, если вы откроете оба всплывающих окна и попытаетесь закрыть одно из них, скрывается только другое всплывающее окно.

Можете ли вы помочь мне понять, что не так в моем коде?

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Когда вы нажимаете close, обработчик запускается, скрывая все элементы, соответствующие вашему селектору.

После завершения обработчика событие всплывает DOM, достигая .nav-item parent и запуск его обработчика, поскольку в конце концов это событие click, в результате чего всплывающее окно потомка снова появляется.

Чтобы решить эту проблему, вам нужно stop событие из всплывающего сообщения . 

$('.close-popup').click(function(e) {
    e.stopPropagation();
    $('.popup').hide();
});

Это позволит скрыть все открытые всплывающие окна. Если вы хотите закрыть только всплывающее всплывающее окно, вам нужно изменить обработчик закрытия, чтобы ограничить этот элемент, аналогично тому, что вы делаете с обработчиком открытия и .find(), используя .parent() или .closest() функции. 

$('.close-popup').click(function(e) {
    e.stopPropagation();
    $(this).parent('.popup').hide();
});
0 голосов
/ 02 мая 2020

Работает, когда вы добавляете stopPropagation() к событию click() элемента .close-popup: 

$('.scroll-nav-item').click(function() {
  $(this).find('.popup').show();
});
$('.close-popup').click(function(e) {
  e.stopPropagation();
  $(".popup").hide();
});
:root{
  --nav-height: 5rem;
  --one-page-minus-nav-height: calc(100vh - var(--nav-height));
  --scroll-nav-width: 80px;
  --bg-light: #f8f9fa;
  --bg-dark: #343a40;
  --bg-dark-hover: #606b76;
}

#scroll_nav{
  overflow: visible;
  position: absolute;
  left: 0;
  top: calc(var(--nav-height) + 10rem);
  width: var(--scroll-nav-width);
  background-color: rgba(255, 255, 255, 0.5);
}
.scroll-nav-item{
  display: flex;
  overflow: visible;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--bg-light);
  --offset: 5px;
  width: calc(var(--scroll-nav-width) - calc(var(--offset) / 2));
  height: calc(var(--scroll-nav-width) - var(--offset));
  margin: calc(var(--offset) / 2) calc(var(--offset) / 2) calc(var(--offset) / 2) 0;
  border: 2px solid var(--bg-light);
  background-color: var(--bg-dark);
  cursor: pointer;
}
.popup{
  position: absolute;
  left: var(--scroll-nav-width);
  cursor: auto;
  background-color: white;
  color: black;
}
.close-popup{
  cursor: pointer;
}
.scroll-nav-item:hover{
  background-color: var(--bg-dark-hover);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll_nav" class="d-none d-lg-block rounded-right" style="">
  <div class="scroll-nav-item rounded">
    open Popup
    <div class="popup" style="display: none; min-width: 600px">
      Popin around
      <span class="close-popup"><b>close</b></span>
    </div>
  </div>
  <div class="scroll-nav-item rounded">
    2
  </div>
  <div class="scroll-nav-item rounded">
    3
  </div>
  <div class="scroll-nav-item rounded">
    open popup
    <div id="pu1" class="popup" style="display:none; min-width: 600px">
      popin around
      <span class="close-popup"><b>close</b></span>
    </div>
  </div>
</div>

Если вы хотите закрыть только всплывающее окно, в котором был нажат .close-popup, установите значение 

 $('.close-popup').click(function(e) {
    e.stopPropagation();
    $(this).parent('.popup').hide();
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...