CODEWITHSUNDEEP
jquerycss
Elcid_91
Elcid_91

Reputation: 1681

Issue with hiding div in jQuery

Clicking on one of the navitem classes should hide the div with ID "hammenu"; however it doesn't hide. The CSS does have the display set to "flex" and I tested that condition. Still does not want to hide. Any suggestions would greatly be appreciated.

$(document).ready(function() {
  $(".hammenucntr").click(function(e) {
    var pos = $(this).position();
    $("#hammenu").css({
      "left": (pos.left + 20) + "px"
    }).show();
  })
  $(".navitem").click(function(e) {
    if ($("#hammenu")){ 
        $("#hammenu").hide();
      }
    })
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrapper">
  <div id="navm">
    <div class="hammenucntr">
      <i class="fas fa-bars"></i>
      <div id="hammenu" class="navmenucntr">
        <div class="navitem">Home</div>
        <div class="navitem">Test 1</div>
        <div class="navitem">Test 2</div>
        <div class="navitem">Test 3</div>
        <div class="navitem">Test 4</div>
        <div class="navitem">Test 5</div>
        <div class="navitem">Test 6</div>
      </div>
    </div>
  </div>
UPDATE: Ok this question started out as a complete train wreck. I created a fiddle that demonstrates the issue. I apologize for trying to hurry through asking a question.

JS Fiddle

Upvotes: 0

Views: 53

Answers (1)

delosgatos
delosgatos

Reputation: 116

Your first click handler $(".hammenucntr").click catch it before $(".navitem").click handler, cause .navitem is child of .hammenucntr. You should use e.stopPropagation() in second handler to stop bubbling event to its parent.

more about event phases: https://javascript.info/bubbling-and-capturing

Upvotes: 3

Related Questions