Как добавить класс с Javascript к автоматически сгенерированному дочернему элементу меню Joomla 'li' в пределах определенного div? - PullRequest
Новая
       20

Как добавить класс с Javascript к автоматически сгенерированному дочернему элементу меню Joomla 'li' в пределах определенного div?

1 голос
/ 04 октября 2019

Я работаю над шаблоном, используя Bootstrap 4 для Joomla 4. Структура главного меню на разных уровнях (родительский, дочерний, более глубокий и т. Д.) Определяется в php-файлах mod_menu. Я поместил одно и то же меню (основного сайта) в две позиции: одну для мобильных устройств (#sidenav) и одну для рабочего стола (#mainmenu).

Элементы li на дочернем уровне, которые действуют как разделитель /заголовок для следующего уровня в меню (например, пункт «Дополнительная информация», но не «элемент верхнего уровня») имеет класс .dropdown-submenu, примененный из файла mod_menu / default_separator.php.

sidenav отображается так, как мне хотелось бы (см. Рис: sidenav), но в главном меню (т. Е. На рабочем столе / на большом планшете) я бы хотел, чтобы второй и все последующие выпадающие уровни были «прямолинейными»,

Когда я добавляю класс с помощью инспектора Firefox, он работает отлично, поэтому, чтобы это произошло автоматически, мне нужно добавить класс, используя Javascript, чтобы изменить его следующим образом: 

    <li class="dropdown-submenu">

without dropright

к этому, добавив класс Bootstrap «dropright», чтобы маленькая каретка указывала вправо, а не вниз: 

<li class="dropdown-submenu dropright">

with dropright

Как вы можете видеть выше, когда я добавляю класс с помощью инспектора Firefox, он работает отлично, поэтому я пытаюсь добавить некоторый javascript к пользователю user.js, чтобы он работал автоматически.

Я пробовал добавлять различныебиты кода, но ни один из них не имеет никакого эффекта: 

  function dropRight() {
  var element = document.getElementById('mainmenu');
  var elements = document.getElementsByClassName('.dropdown-submenu');
  elements.classList.add("dropright");
}

и 

    function dropRight() {
    var element = document.getElementById('mainmenu');
    var ul = document.getElementsByClassName("dropdown-menu");
    var li = ul[0].getElementsByClassName("dropdown-submenu"); 
    for ( var i = 0; i < li.length; i++ ){
    var class = li[i].className += " dropright";
}

Следующие фрагменты кода также не работают, но даже если бы они это сделали, они добавили быКласс Sidenav также, что я не хочу, поэтому мне нужно выбрать id 'mainmenu': 

    function dropRight() {
    var elements = document.getElementsByClassName('dropdown-submenu');
    elements[0].className += " dropright";
    }

или 

    function dropRight() {
    var elements = document.getElementsByClassName('.dropdown-submenu');
    elements.classList.add("dropright");
}

Я искал в Интернете всевчерашний день для ответов и перепробовал множество других комбинаций безрезультатно. Javascript определенно не моя удача, поэтому любая помощь будет с благодарностью получена.

1 Ответ

0 голосов
/ 06 октября 2019

Я нашел ответ: 

window.onload = function(){dropRight()};
function dropRight() {
    var x = document.getElementById("mainmenu").querySelectorAll("li.dropdown-submenu");
x[0].className += " dropright";
}
...