We Keep Coding

Removing a class from navbar to make it collapse upon navbar item being clicked

I have a navbar that's inherited from some legacy code - and I'm trying to get the mobile version to collapse when a menu item is clicked.
http://shitnavbar.brodiedigital.io/
If you resize the window and scroll beyond the first 100vh of the page the hamburger menu will appear.
clicking will reveal the menu items
clicking a menu item WILL scroll you to correct area of page, but not collapse/close the menu
At the moment I'm using some jquery to attempt to do this by targeting just a single item on the menu - 'BIKES', with little joy:
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
html for the section is
<div class="menu active">
<div class="menu_content d-flex flex-column align-items-center justify-content-center">
<ul class="menu_nav_list text-center">
<li>LOCATIONS</li>
<li>BIKES</li>
<li>CONCIERGE</li>
<li>ABOUT</li>
<li>ENQUIRE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
Jquery isnt my strong point, but feel like im having a bit of a brain fart moment here - something very simple I'm doing wrong.
Has anyone got an insight into why clicking bikes is not removing the class 'active' from the div that has 'menu' class in it?

Your selector is probably the problem, the following will work for all your nav links
$('.menu_nav_list li a').on('click', function(){
$('.menu').removeClass('active');
});

You have no element with an id of _bikes that is why your jquery doesn't work. Use a selector that will work:
$('.menu_nav_list a').on('click', function(e){ // target all anchors in the menu nav list
e.preventDefault(); // prevent default action of link click
$(this).closest('.menu').removeClass('active'); // get the closest ancestor of the link that has a class of .menu
});
.active a {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu active">
<div class="menu_content d-flex flex-column align-items-center justify-content-center">
<ul class="menu_nav_list text-center">
<li>LOCATIONS</li>
<li>BIKES</li>
<li>CONCIERGE</li>
<li>ABOUT</li>
<li>ENQUIRE</li>
<li>CONTACT</li>
</ul>
</div>
</div>

Your website has console errors. It's from this:
<script type="text/javascript">
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
</script>
When you run jQuery code, you need to include this code below the link to the jQuery file, right now you are tryint to run jQuery code before the jQuery library has been loaded.
And also wrap it in something to wait for the document to become ready
<script type="text/javascript">
$(function() {
$('#_bikes').on('click', function(){
$('.menu').removeClass('active');
});
});
</script>
It also looks like you are including jQuery library twice, and at two different versions. v3.2.1 and v1.11.0
(Also as a side note, the codebase might be legacy, but that site looks really slick!)

In your code above you used .on() incorrectly and you are also targeting the element
if you wanted to target the href you would need to put the following inside the selector a[href="_bikes"] because currently you are trying to select a ID not the href in your selector.
You need to add the following code to your javascript file and it will close the menu if you click on any link inside you nav
$(document).on('click','.menu_nav_list a', function(){
$('.menu').removeClass('active');
});

Using "dialogclose" event in jQuery mobile

I would like an image to change once clicked and change back once the dialog it links to is closed.
I actually found a solution to what I was trying to do on this site, right here However, upon modifying it to suit my needs it does not work, Can anybody pinpoint what I am missing?
HTML:
<div data-role="footer" data-position="fixed" data-id="myFooter">
<div class="navBar" id="bah" data-role="navbar">
<a href="#menu" id="burgerMenu" data-rel="popup">
<img id="burger" src="resources/burger.png" alt=""/>
</a>
</div>
</div>
jQuery:
$(document).ready(function()
{
$("#bah").on("dialogclose", function(event)
{
$("#burger").attr("src","resources/burger.png");
});
});

Use jQM pagecreate event instead of the regular jQuery ready
For popup clode, the correct event is popupafterclose
The popup id in your example is menu not bah.
$(document).on("pagecreate","#page1", function(){
$("#menu").on("popupafterclose", function(event) {
$("#burger").prop("src","http://lorempixel.com/24/24/technics/1/");
});
});
DEMO

slideDown function needs two click to work

I'm having a slideDown function on my site. But somehow it doesn't work the first time when you click it. So I need to click two times to make the function work. What can possible be wrong?
I also want the div to slide up when I click on the button again, don't know how I will do this. I tried using slideToggle but it just ended up with the div going up and down a couple of times before closing. Even for this I needed to click two times.
Here is my JS:
function showCart() {
$("#rollDown").click(function() {
$("#shopping_cart_page").slideDown();
});
/* not relevant for this */
emptyBag = document.getElementById("emptyBag");
emptyBag.addEventListener("click", emptyCart);
}
And here is my HTML:
<div id="navbar">
<ul>
<li>Products</li>
<li>About</li>
<li>Giveaways</li>
<li>Contact </li>
<li><a id="rollDown">Shopping Bag</a></li>
</ul>
</div>

Here's a simple example:
jQuery:
$(document).ready(function(){ // Just adding the click event inside the document ready method should do the trick for you.
$("#rollDown").click(function() {
$("#shopping_cart_page").slideToggle();
});
});
HTML
<input type="submit" id="rollDown" value="Toggle"/>
<div id="shopping_cart_page">Hi</div>
Fiddle: http://jsfiddle.net/64gn1unk/

how to add class on click event on another list

Problem is following. So, I have this HTML
<div class="sitemap">
<div class="collapse-all">
[alles Ausklappen / Einklappen]
</div>
<div class="collapse-list"> <!-- 1. box -->
<div class="collapse-box">
<h2>
Logo
</h2>
<!-- This "in" class for some reason helps us to keep all boxes closed -->
<div class="collpase-container collapse in" id="first-select-box">
<ul>
<li >
And I need to add class, lets say "active" to an element collapse-box when user clicks on div "collapse-all". I hope I made it clear.
Here is small screenshot from DOM.
LINK TO screenshot:
http://i62.tinypic.com/r8e8zs.jpg
pls try to edit this fiddle:
http://jsfiddle.net/ufe8n/1/

You can do this:
$(".collapse-all a").click(function(e){
e.preventDefault();
$(this).closest(".collapse-all").next().find('.collapse-box').addClass('active');
});
Is this you want.

You can use this code in click handler of .collapse-all div:
$(".collapse-all").click(function(){
$(this).next().find('.collapse-box').addClass('active');
});

$(".collapse-all").click(function(){
$(".collapse-box").addClass("active");
});

$(".collapse-all").live("click",function(){
$(".collapse-box").addClass("active");
});

jQuery .bind() selector

I'm trying to bind a click event to an anchor and I can't figure out the right selector... Is bind() particularly picky with selectors?
Here's my code which does not work:
$(".ui-navbar").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
The following code does work but causes the whole body to appear like it is being clicked on an Android smartphone (ugly yellow box around the anachor).
$("body").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
This is the html:
<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-search">Search</span></span></span>
</li>
<li class="ui-block-b">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-location">Location</span></span></span>
</li>
<li class="ui-block-c">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-settings">Settings</span></span></span>
</li>
</ul>
</div>

live is deprecated. Use on instead.

If you want to have a click event on the anchor elements in .ui-navbar and the HTML is static HTML that exists at page load time, then you can just use this:
$(document).ready(function() {
$(".ui-navbar a").click(function() {
navigateToPage("location.html", { });
});
});
That will make the <a> tags in that piece of your HTML clickable. But, those <a> tags have no content to them and thus no size so nobody will be able to click on them until you give them some content.
If your problem is something different than this, please explain.
If the content is added dynamically via script, then you can use .live() like this:
$(document).ready(function() {
$(".ui-navbar a").live("click", function() {
navigateToPage("location.html", { });
});
});