Раскрывающийся список многостолбцовой загрузки не меняет класс li - PullRequest
Новая
       12

Раскрывающийся список многостолбцовой загрузки не меняет класс li

0 голосов
/ 07 мая 2018

У меня есть какое-то странное поведение для выпадающего меню, которое я решил перенести в многоколонку. 

<!-- language-all: lang-html -->
<li class='dropdown'>
  <a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
  <ul class='dropdown-menu multi-column columns-3'>
    <div class='row'>
      <div class='col-sm-3'>
        <ul class='multi-column-dropdown'>
          <li class='disabled' disabled>Server 1</li>
          <li class='divider'></li>
          <li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
          <li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
        </ul>
      </div>
      <div class='col-sm-3'>
        <ul class='multi-column-dropdown'>
          <li class='disabled' disabled>Server 2</li>
          <li class='divider'></li>
          <li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
        </ul>
      </div>
      <div class='col-sm-3'>
        <ul class='multi-column-dropdown'>
          <li class='disabled' disabled>Server 3</li>
          <li class='divider'></li>
          <li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
        </ul>
      </div>
    </div>
  </ul>
</li>

Вот образец: https://jsfiddle.net/Meeshka/0fazzvdh/9

При первом выборе каждой строки в раскрывающемся списке все работает как шарм. Но, пытаясь вернуться к отчету 3 или 5, я вижу, что не могу этого сделать. При проверке кода я увидел, что хотя я переключаюсь на Отчет 1 или 2, элемент li предыдущего отчета остается с class = "active". 

<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>

Это происходит только тогда, когда я переключаюсь между отчетами в разных столбцах. Отчеты в том же раскрывающемся столбце работают нормально. Если я добавлю в каждый столбец хотя бы 2 строки, мне удастся переключиться, но не в 100% случаев, поведение непредсказуемо.

Как в этом примере: https://jsfiddle.net/Meeshka/0fazzvdh/1/

Единственный способ сделать все правильно, это вручную вызвать атрибут класса для элемента, когда я переключаюсь на другой? Это ошибка или я что-то упустил в коде?

1 Ответ

0 голосов
/ 20 мая 2018

Пока что я думаю, что нет "правильного" решения этой ошибки. Если кто-то хочет получить готовое и очень прямолинейное решение, вот как я его решил: 

    <script type='text/javascript'>
        $('a[data-toggle="tab"]').on('click', function(event) {
          $(this).closest('div.row').find('li').each(function(){
            //console.log($(this).attr('class'));
            $(this).removeClass('active');
          });
        });
    </script>

Вот как это выглядит в скрипке: https://jsfiddle.net/Meeshka/0fazzvdh/10/

...