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

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/[email protected]/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 >
    <div >
      <a  href="index.html">ABC.</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span ><i ></i>
        </span>
      </button>
      <div  id="navbarSupportedContent">
        <ul >
          <li >
            <a  aria-current="page" href="about.html">About</a>
          </li>
          <li >
            <a  href="mailto:[email protected]?subject=Hello from your portfolio!">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

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;
}

CodePudding user response：

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/[email protected]/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 >
  <div >
    <a  href="index.html">ABC.</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span ><i ></i>
        </span>
      </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="about.html">About</a>
        </li>
        <li >
          <a  href="mailto:[email protected]?subject=Hello from your portfolio!">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>