Changing display CSS with jQuery not working

JavaScript
1

My pen --> https://codepen.io/Mike-was-here123/pen/zMWrwx?editors=1010

Background information:

All CSS starts at line 30 and ends at 77 (#drop-content on 71)

HTML starts at line 10 and ends at 19

100% of the Javascript is for the nav bar.

My Issue:

When I click on my #drop-content it should, using CSS, toggle the display to flex so it is visible.

$("#drop-button").click(function() {
 $("drop-content").css('display', 'flex');
});

What you should see:

image
image1280×984 276 KB

But in reality, nothing happens when i click.

Then when you click on any part of the window, it should go away:

window.onclick = function(){ 
  $("drop-content").css('display', 'none');
}

Full code:

window.onclick = function(){ 
  $("drop-content").css('display', 'none');
}
$("#drop-button").click(function() {
  $("drop-content").css('display', 'flex');
});

Question:

Why isn’t this working? How can i fix it?

2

Try this
window.onload = function(){
$("#drop-content").css(‘display’, ‘none’);
}
$("#drop-button").click(function() {
$("#drop-content").toggle();

})

And ad display:flex in css at drop-button

3

Okay i used that code to create this:

window.onload = function() {
  $("#drop-content").css("display", "none");
  window.onclick = function() {
    let id = this.id;
    if (id === "drop-button") {
      // "drop-button"
      // undefined
      $("#drop-content").toggle()
    } else {
      $("#drop-content").css("display", "none");
    }
  };
};

Basically i give my drop down menu button an id and then checking the id of whatever you are clicking on he html.

If it is the drop down menu (#drop-button) it will load the drop down menu, else it will hide it.

I know it works because if you check for a undefined id it works the way i want but loads no matter where you click on the html.

How can i correctly check for the id so i can make it so it is only the drop-menu button id?

4

So any ideas on how to correctly select the id?

5

Inside window.onclick “this” is the window object, this.id is undefined

Summary 
window.onload = function() {
  $("#drop-content").css("display", "none");
  window.onclick = function() {
    let id = this.id;
    console.log(this)
    if (id === "drop-button") {
      // "drop-button"
      // undefined
      $("#drop-content").toggle()
    } else {
      $("#drop-content").css("display", "none");
    }
  };
};

check is not in scope in your click function, it is scoped to the window.onload function

Summary 
window.onload = function() {
  var check = false;
  $("#drop-content").css("display", "none");
};
$("#drop-button").click(function() {
  if (check === false) {
    $("#drop-content").toggle();
    check = true;
    return;
  }
});
window.onclick = function() {
  check = false;
  $("#drop-content").toggle();
};

Not really sure if this is what you want, also I might have overcomplicated this, but I’m rusty.

  1. Change drop-content to a class, add the hide class

<div class="drop-content hide">

  1. CSS
.drop-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hide {
  display: none;
}
  1. JavaScript
$("#drop-button").click(function() {
  if ($(".drop-content").hasClass("hide")) {
    $(".drop-content").removeClass("hide");
  } else {
    $(".drop-content").addClass("hide");
  }
});

$("html").click(function(e) {
  const check = $(".drop-content").hasClass("hide");
  if (e.target.id !== "drop-button" && e.target.className !== "fas fa-bars") {
    if (!check) {
      $(".drop-content").addClass("hide");
    }
  }
});