Как добавить класс к следующему элементу `ul`

Question

Как выбрать второго ul, который имеет класс collapse, и добавить или удалить (если он добавлен) класс.Но сначала мне нужно добавить active класс к li элементу с первого ul, как я это сделал с этой частью кода.

$(this).parent("ul#sidebarnav").length === 0 ? $(this).addClass("active") : $(this).addClass("selected");

Я знаю, что могучто-то вроде $(this).next("ul").addClass("in");, но я не могу понять, где добавить эту часть кода, или мне нужно что-то плюс или что-то еще.

HTML

<nav class="sidebar-nav">
   <ul id="sidebarnav">
        <li> 
            <a class="has-arrow waves-effect waves-dark" href="{{route('quotation.index')}}" aria-expanded="false">
                <i class="fas fa-paste"></i>
                         <span class="hide-menu">Quotations</span>
            </a>
            <ul aria-expanded="false" class="collapse">

                 <li>
                 </li>
                 <li>
                 </li>
                 ...
                 ...
             </ul>

ОБНОВЛЕНИЕ: jQuery

var url = window.location + "";
    var path = url.replace(window.location.protocol + "//" + window.location.host + "/", "");
    var element = $('ul#sidebarnav a').filter(function() {
        return this.href === url || this.href === path;// || url.href.indexOf(this.href) === 0;
    });

    element.parentsUntil(".sidebar-nav").each(function (index)
    {
        if($(this).is("li") && $(this).children("a").length !== 0)
        {
            $(this).parent("ul#sidebarnav").length === 0
                ? $(this).addClass("active")
                : $(this).addClass("selected");
        }
        else if(!$(this).is("ul") && $(this).children("a").length === 0)
        {
            $(this).addClass("selected");
        }
        else if($(this).is("ul")){
            $(this).show();
        }
    });

    element.addClass("active");
    $('#sidebarnav a').on('click', function (e) {

        if (!$(this).hasClass("active")) {
            // hide any open menus and remove all other classes
            $("ul", $(this).parents("ul:first")).removeClass("in");
            $("a", $(this).parents("ul:first")).removeClass("active");

            // open our new menu and add the open class
            $(this).next("ul").addClass("in");
            $(this).addClass("active");

        }
        else if ($(this).hasClass("active")) {
            $(this).removeClass("active");
            $(this).parents("ul:first").removeClass("active");
            $(this).next("ul").removeClass("in");
        }
    })
    $('#sidebarnav >li >a.has-arrow').on('click', function (e) {
        e.preventDefault();
    });
});

Answer 1

Ниже приведен фрагмент кода, как вы можете получить желаемый результат.

const data = document.querySelectorAll("ul.collapse");

эта строка даст вам список всех ul, у которых есть класс коллапса, и это будет массив.Теперь вы хотите удалить класс коллапса из второго ul, который имеет класс коллапса.(хитроумно вы сказали, что все UL имеют класс коллапса, поэтому он содержит все те UL, у которых есть класс коллапса, и вы сказали => "и добавить или удалить (если добавлено)" <=, поэтому нам нужно будет удалить только потому, чтоу всех ul будет класс коллапса, однако я поставлю условие только для вашего понимания, если класс коллапса отсутствует, первое условие будет добавлено, а второе условие будет удалено, если присутствует коллапс.) </p>

if (data[1].classList.indexOf("collapse") === -1 {
   data[1].classList.add("collapse");
}
else {
   data[1].classList.remove(" collapse ");
}

то же самое вы можете добавитьактивный класс.