Issue with hiding div in jQuery

Question

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

You have some pretty obvious syntax issues here. I'd suggest always checking the console when some JS code doesn't work as expected. I've edited your question to include an executable snippet which should make the issues easier to see — Rory McCrossan
– Rory McCrossan, Commented Feb 26, 2018 at 15:01
I corrected the conditional issue I believe you are referring to. Console shows nothing with clicking on a navitem. — Elcid_91
– Elcid_91, Commented Feb 26, 2018 at 15:02
@CBroe - Itchy trigger finger on first post. Edit has been made to correct. Issue still lingering. — Elcid_91
– Elcid_91, Commented Feb 26, 2018 at 15:03
Then please edit question, to reflect current/actual code. Plus, make the whole thing into a minimal reproducible example, please, so that we can see what is actually going on. — C3roe
– C3roe, Commented Feb 26, 2018 at 15:05

delosgatos · Accepted Answer · 2018-02-26 15:12:27Z

3

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

answered Feb 26, 2018 at 15:12

delosgatos

1165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with hiding div in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related