Change CSS of parent element when child element is clicked using JQuery - html

Question

I am trying to change the CSS of a parent image (navbar's border) when the mobile hamburger menu is clicked open, then for it to return back again when clicked again/menu closed.
I have tried to target the navbar with the border using both .parent and .find selector options, but I cannot get either to work. I think I am close, but I'm struggling to work out what's going wrong. Thank you for your help.
$(".navbar-toggler").click(function(){
$(this).find('.navbar').addClass("is-clicked");
$(this).find('.navbar').removeClass("is-clicked");
});
.navbar {
position: relative;
z-index: 98;
border-bottom: 4px solid #000000;
margin-left: 40px;
margin-right: 40px;
color: #000000;
height: 100px;
}
.navbar.is-clicked {
border-bottom: red;
}
.navbar-toggler {
font-size: 32px;
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid nav-container">
<a class="navbar-brand" href="index.html">ABC.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"><i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item nav-item-about p-nav">
<a class="nav-link" aria-current="page" href="about.html">About</a>
</li>
<li class="nav-item p-nav">
<a class="nav-contact" href="mailto:michellelclement#gmail.com?subject=Hello from your portfolio!">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Answer 1

That is because when you use $(this).find('.navbar'), it only searches for the element with the class navbar inside the element.
If you want to search outwards, then you need to use .closest(), which will select the closest parent element that matches the selector .navbar:
$(".navbar-toggler").click(function(){
$(this).closest('.navbar').toggleClass("is-clicked");
});
See a proof-of-concept example:
$(".navbar-toggler").click(function() {
$(this).closest('.navbar').toggleClass("is-clicked");
});
.navbar {
position: relative;
z-index: 98;
border-bottom: 4px solid #000000;
margin-left: 40px;
margin-right: 40px;
color: #000000;
height: 100px;
}
.navbar.is-clicked {
border-bottom-color: red;
}
.navbar-toggler {
font-size: 32px;
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid nav-container">
<a class="navbar-brand" href="index.html">ABC.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"><i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item nav-item-about p-nav">
<a class="nav-link" aria-current="page" href="about.html">About</a>
</li>
<li class="nav-item p-nav">
<a class="nav-contact" href="mailto:michellelclement#gmail.com?subject=Hello from your portfolio!">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Answer 2

The Jquery:
$('.navbar-toggler').on('click', function(){
$('.navbar').toggleClass('is-clicked');
});
You also need to change this in your css:
.navbar.is-clicked {
border-bottom-color: red;
}