загрузочные вкладки внутри аккордеона

Я использую вкладки внутри аккордеона, чтобы создать меню категорий. Когда пользователь нажимает на категорию, он получает список подкатегорий, и когда они нажимают на подкатегорию, они получают список со всеми продуктами. мне удалось написать JQuery, но я получаю сообщение об ошибке в консоли: Uncaught TypeError: Cannot read property 'tab' of undefinedзагрузочные вкладки внутри аккордеона

<div class="container container-pad"> 
    <div class="col-md-12"> 
    <div class="row"> 
     <div class="col-md-3"> 
     <ul class="list-group category" role="tablist"> 
      <li class="list-group-item"> 
      <a role="button" data-toggle="collapse" href="#collapseOne"> 
       categories 1 
      </a> 
      </li> 
      <ul id="collapseOne" class="panel-collapse collapse"> 
      <li class="list-group-item" role="presentation"> 
       <a href="#category1" aria-controls="category1" role="tab" data-toggle="tab">category 1<span class="badge">1</span></a> 
      </li> 
      <li class="list-group-item" role="presentation"> 
       <a href="#category2" aria-controls="category2" role="tab" data-toggle="tab">category 2<span class="badge">2</span></a> 
      </li> 
      </ul> 
      <li class="list-group-item"> 
      <a role="button" data-toggle="collapse" href="#collapseTwo"> 
       categories 2 
      </a> 
      </li> 
      <ul id="collapseTwo" class="panel-collapse collapse"> 
      <li class="list-group-item" role="presentation"> 
       <a href="#category3" aria-controls="category3" role="tab" data-toggle="tab">category 3<span class="badge">3</span></a> 
      </li> 
      </ul> 
      <li class="list-group-item"> 
      <a role="button" data-toggle="collapse" href="#collapseThree"> 
       categories 3 
      </a> 
      </li> 
      <ul id="collapseThree" class="panel-collapse collapse"> 
      <li class="list-group-item" role="presentation"> 
       <a href="#category4" aria-controls="category4" role="tab" data-toggle="tab">category 4<span class="badge">4</span></a> 
      </li> 
      <li class="list-group-item" role="presentation"> 
       <a href="#category5" aria-controls="category5" role="tab" data-toggle="tab">category 5<span class="badge">5</span></a> 
      </li> 
      </ul> 
     </ul> 
     </div> 
     <div class="col-md-9"> 
     <div class="tab-content"> 
      <div role="tabpanel" class="tab-pane fade in active" id="category1"> 
      <ul class="list-group products"> 
      <li class="list-group-item"> 
       product 1 
      </li> 
      </ul> 
      </div> 
      <div role="tabpanel" class="tab-pane fade" id="category2"> 
      <ul class="list-group products"> 
       <li class="list-group-item"> 
       product 2 
       </li> 
       <li class="list-group-item"> 
       product 3 
       </li> 
      </ul> 
      </div> 
      <div role="tabpanel" class="tab-pane fade" id="category3"> 
      <ul class="list-group products"> 
       <li class="list-group-item"> 
       product 4 
       </li> 
       <li class="list-group-item"> 
       product 5 
       </li> 
       <li class="list-group-item"> 
       product 6 
       </li> 
      </ul> 
      </div> 
      <div role="tabpanel" class="tab-pane fade" id="category4"> 
      <ul class="list-group products"> 
       <li class="list-group-item"> 
       product 7 
       </li> 
       <li class="list-group-item"> 
       product 8 
       </li> 
       <li class="list-group-item"> 
       product 9 
       </li> 
       <li class="list-group-item"> 
       product 10 
       </li> 
      </ul> 
      </div> 
      <div role="tabpanel" class="tab-pane fade" id="category5"> 
      <ul class="list-group products"> 
       <li class="list-group-item"> 
       product 11 
       </li> 
       <li class="list-group-item"> 
       product 12 
       </li> 
       <li class="list-group-item"> 
       product 13 
       </li> 
       <li class="list-group-item"> 
       product 14 
       </li> 
       <li class="list-group-item"> 
       product 15 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>    


<script> 
$('ul.panel-collapse li').click(function (e) { 
    $('ul li.active').removeClass('active'); 
    e.preventDefault() 
      .tab('show'); 
    $(this).addClass('active'); 
}); 
</script>

JSFiddle

источник

2016-06-11 Liad Idan

Какая часть вашего HTML является "вкладка"? Поскольку вы объяснили это прямо сейчас, вы не очень четко понимаете, что именно вы пытаетесь сделать. – Jonathan

Внутри элемента li.list-group я пытаюсь решить эту консольную ошибку. все работает так, как я ожидал –

Правильно, я вижу '.tab()' является частью бутстрапа. – Jonathan

$('ul.panel-collapse li').click(function (e) { 
    e.preventDefault(); 
    $('ul.panel-collapse li.active').removeClass('active'); 
    $(this).children().tab('show').addClass('active'); 
});

$('ul.panel-collapse li') получает ваш .list-group-items.

$(this).children().tab('show'); предназначается для разметки тегов бутстрапа в a детей с вашего сайта li.

Мы можем связать некоторые методы на $(this) до тех пор, пока те методы, прикованные после него, не возвращают что-то новое. Так что не надо называть $(this) дважды $(this).addClass('active');

Использование $(e.target) из раствора Питера лучше, хотя, как он получает элемент, который вызвал событие непосредственно.

источник

2016-06-11 14:07:40 Jonathan

Я добавил $ ('a', это) перед .tab ('show'), и теперь он работает без ошибок. Также ваше решение работает хорошо. TNX (; –

Попробуйте В следующем примере

$('ul.panel-collapse li').click(function (e) { 
 
    e.preventDefault(); 
 
    $('ul li.active').removeClass('active'); 
 
    $(e.target).tab('show').addClass('active'); 
 
});

.badge { 
 
    float: right; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container container-pad"> 
 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <ul class="list-group category" role="tablist"> 
 
      <li class="list-group-item"> 
 
      <a role="button" data-toggle="collapse" href="#collapseOne"> 
 
       categories 1 
 
      </a> 
 
      </li> 
 
      <ul id="collapseOne" class="panel-collapse collapse"> 
 
      <li class="list-group-item" role="presentation"> 
 
       <a href="#category1" aria-controls="category1" role="tab" data-toggle="tab">category 1<span class="badge">1</span></a> 
 
      </li> 
 
      <li class="list-group-item" role="presentation"> 
 
       <a href="#category2" aria-controls="category2" role="tab" data-toggle="tab">category 2<span class="badge">2</span></a> 
 
      </li> 
 
      </ul> 
 
      <li class="list-group-item"> 
 
      <a role="button" data-toggle="collapse" href="#collapseTwo"> 
 
       categories 2 
 
      </a> 
 
      </li> 
 
      <ul id="collapseTwo" class="panel-collapse collapse"> 
 
      <li class="list-group-item" role="presentation"> 
 
       <a href="#category3" aria-controls="category3" role="tab" data-toggle="tab">category 3<span class="badge">3</span></a> 
 
      </li> 
 
      </ul> 
 
      <li class="list-group-item"> 
 
      <a role="button" data-toggle="collapse" href="#collapseThree"> 
 
       categories 3 
 
      </a> 
 
      </li> 
 
      <ul id="collapseThree" class="panel-collapse collapse"> 
 
      <li class="list-group-item" role="presentation"> 
 
       <a href="#category4" aria-controls="category4" role="tab" data-toggle="tab">category 4<span class="badge">4</span></a> 
 
      </li> 
 
      <li class="list-group-item" role="presentation"> 
 
       <a href="#category5" aria-controls="category5" role="tab" data-toggle="tab">category 5<span class="badge">5</span></a> 
 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 
     <div class="col-md-9"> 
 
     <div class="tab-content"> 
 
      <div role="tabpanel" class="tab-pane fade in active" id="category1"> 
 
      <ul class="list-group products"> 
 
      <li class="list-group-item"> 
 
       product 1 
 
      </li> 
 
      </ul> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="category2"> 
 
      <ul class="list-group products"> 
 
       <li class="list-group-item"> 
 
       product 2 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 3 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="category3"> 
 
      <ul class="list-group products"> 
 
       <li class="list-group-item"> 
 
       product 4 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 5 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 6 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="category4"> 
 
      <ul class="list-group products"> 
 
       <li class="list-group-item"> 
 
       product 7 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 8 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 9 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 10 
 
       </li> 
 
      </ul> 
 
      </div> 
 
      <div role="tabpanel" class="tab-pane fade" id="category5"> 
 
      <ul class="list-group products"> 
 
       <li class="list-group-item"> 
 
       product 11 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 12 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 13 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 14 
 
       </li> 
 
       <li class="list-group-item"> 
 
       product 15 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ОБНОВЛЕНО Fiddle

источник

2016-06-11 14:21:04

загрузочные вкладки внутри аккордеона

ответ

Смежные вопросы