CODEWITHSUNDEEP
javascriptjquery
Sagích dirnet
Sagích dirnet

Reputation: 19

jQuery hide element by class doesn't hide all elements

i got a problem. When I'm hiding all elements with specific class only elements except the clicked one are hidden. I have no idea why this is happening.

if I put the popup somewhere else on the page, it's working. I think it has to be related to the css, but I couldn't figure out which property is causing this problem.

Code 

      $('.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>

As you can see, if you open both popups and try to close one of them, only the other popup gets hidden.

Can you help me understanding what is wrong in my code?

Upvotes: 0

Views: 160

Answers (2)

matthias_h
matthias_h

Reputation: 11416

It works when you add stopPropagation() to the click() event of the .close-popup element:

$('.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>

In case you only want to close the popup in which the .close-popup was clicked, adjust this to

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

Upvotes: 0

msg
msg

Reputation: 8181

When you click close, the handler gets executed, hiding all elements that match your selector.

After the handler has finished, the event bubbles up the DOM, reaching the .nav-item parent and triggering its handler, since it's a click event after all, resulting in the child popup showing again.

To solve this, you have to stop the event from bubbling.

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

This will hide all open popups. If you want to close only the popup that's clicked, you have to modify the close handler so it's restricted that element, akin to what you do with the open handler and .find(), by using .parent() or .closest() functions.

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

Upvotes: 1

Related Questions