Children can easily access multiple items within a list by using the ul tag

Question

Children can easily access multiple items within a list by using the ul tag

I am struggling with changing the class of ul inside the ul.navigator. I want to change it only when I click on a particular li, but my current approach doesn't seem to be working. Can anyone provide some guidance or assistance?

$('.navigator').children('li ul').each(function() {
  if ($(this).hasClass('opened')) {
    $(this).addClass('closed');
    $(this).removeClass('opened');
  } else {
    $(this).addClass('opened');
    $(this).removeClass('closed');
  }
});

.opened {
  color: green
}
.closed {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>

javascript jquery html css children

Answer 1

Answer №1

To achieve the desired result, it is recommended to utilize .find() instead of .children()

When comparing .find() and .children(), note that the latter specifically navigates one level deep into the DOM tree.

$('.navigator').find('li ul')

OR, leverage the Descendant selector

$('.navigator li ul')

$('.navigator').find('li ul').click(function() {
  if ($(this).hasClass('opened')) {
    $(this).addClass('closed');
    $(this).removeClass('opened');
  } else {
    $(this).addClass('opened');
    $(this).removeClass('closed');
  }
});

.opened {
  color: green
}
.closed {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>

Answer 2

To achieve the desired result, it is recommended to utilize .find() instead of .children()

When comparing .find() and .children(), note that the latter specifically navigates one level deep into the DOM tree.

$('.navigator').find('li ul')

OR, leverage the Descendant selector

$('.navigator li ul')

$('.navigator').find('li ul').click(function() {
  if ($(this).hasClass('opened')) {
    $(this).addClass('closed');
    $(this).removeClass('opened');
  } else {
    $(this).addClass('opened');
    $(this).removeClass('closed');
  }
});

.opened {
  color: green
}
.closed {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>

Answer 3

Answer №2

Here's a suggestion on how to approach it:

$('.navigator > li').on('click', function() {
  $('.navigator').children('li ul').each(function() {
    if ($(this).hasClass('opened')) {
      $(this).addClass('closed');
      $(this).removeClass('opened');
    } else {
      $(this).addClass('opened');
      $(this).removeClass('closed');
    }
  });
});

This method ensures that when an li directly under .navigator is clicked, the code will execute as intended.

Answer 4

Here's a suggestion on how to approach it:

$('.navigator > li').on('click', function() {
  $('.navigator').children('li ul').each(function() {
    if ($(this).hasClass('opened')) {
      $(this).addClass('closed');
      $(this).removeClass('opened');
    } else {
      $(this).addClass('opened');
      $(this).removeClass('closed');
    }
  });
});

This method ensures that when an li directly under .navigator is clicked, the code will execute as intended.

Answer 5

Answer №3

implementing toggle Method

$('.navigator li').click(function(){
             $(this).children('ul').toggleClass('closed');          
        });

View the Demo Here

Code Snippet

$('.navigator li').click(function(){
             $(this).children('ul').toggleClass('closed');          
        });

.closed
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <ul class="navigator">
      <li class="elem1">
        <span>Element 1</span>
        <ul class="opened">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
      <li class="elem2">
        <span>Element 2 </span>
      </li>
      <li class="elem3">
        <span>Element 3 </span>
      </li>
    </ul>

Answer 6

implementing toggle Method

$('.navigator li').click(function(){
             $(this).children('ul').toggleClass('closed');          
        });

View the Demo Here

Code Snippet

$('.navigator li').click(function(){
             $(this).children('ul').toggleClass('closed');          
        });

.closed
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <ul class="navigator">
      <li class="elem1">
        <span>Element 1</span>
        <ul class="opened">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </li>
      <li class="elem2">
        <span>Element 2 </span>
      </li>
      <li class="elem3">
        <span>Element 3 </span>
      </li>
    </ul>

Answer 7

Answer №4

Enhance your code by utilizing toggleClass

   $('.navigator li ul').click(function(){
         $(this).toggleClass('closed');          
    });

Alternatively

for a different approach to resolving the issue, consider the following:

use childern apply with same line $('.navigator li ul').
Apply removeclass before addClass.
And Don't forget to add jquery library

Code Snippet

$('.navigator li ul').click(function(){
        if($(this).hasClass('opened')){
            $(this).removeClass('opened');
            $(this).addClass('closed');
          
        } else {
            $(this).addClass('opened');
            $(this).removeClass('closed');
        }
    });

.opened{color:green}
.closed{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>

Answer 8

Enhance your code by utilizing toggleClass

   $('.navigator li ul').click(function(){
         $(this).toggleClass('closed');          
    });

Alternatively

for a different approach to resolving the issue, consider the following:

use childern apply with same line $('.navigator li ul').
Apply removeclass before addClass.
And Don't forget to add jquery library

Code Snippet

$('.navigator li ul').click(function(){
        if($(this).hasClass('opened')){
            $(this).removeClass('opened');
            $(this).addClass('closed');
          
        } else {
            $(this).addClass('opened');
            $(this).removeClass('closed');
        }
    });

.opened{color:green}
.closed{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigator">
  <li class="elem1">
    <span>Element 1</span>
    <ul class="opened">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li class="elem2">
    <span>Element 2 </span>
  </li>
  <li class="elem3">
    <span>Element 3 </span>
  </li>
</ul>

Children can easily access multiple items within a list by using the ul tag

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

DIV collapsing in reverse order from the bottom to the top

Using the built-in http module in node.js to upload images via multipart/form-data

Error received when attempting AJAX call with jQuery 1.7.2: NS_ERROR_XPC_NOT_ENOUGH_ARGS

Having difficulties in Vue while attempting to access a particular row

Tips on showing binary information as images using extjs 4

Utilize Electron to extract and render content from a local file into HTML code

Jquery Parallax causing scrolling problems across different browsers

Can you determine the height of an image if only the width and border width are provided?

Instructions for applying a specific style to TextFields using a theme provider

Exploring ways to access data stored in interconnected models, such as MongoDB and NodeJS

A "Uncaught TypeError" error occurs when trying to execute a function using the dollar sign

What is the cause behind the failure of this regular expression in JavaScript?

How to pass a single value using onClick event without relying on form submission

Troubleshooting Java REST service integration in AngularJS for UPDATE and DELETE operations

Transform an item into a map of the item's properties

Assistance with JavaScript Regular Expressions for formatting BBCode

Angular router.redirect is not able to pass variables as expected

Take a custom action once all elements have been rendered with ng-repeat

using node.js to extract a cookie from a 302 redirect

Implementing X.PagedList within a modal pop-up window