У меня есть меню с несколькими категориями:
<div class="col p-0 m-0">
<ul class="Categories__Menu">
@foreach($categories->take(6) as $category)
<li class="active">
<a href="#" name="category" id="{{$category->id}}" href="#">{{$category->name}}</a>
</li>
@endforeach
<li><a data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">More</a></li>
</ul>
</div>
Если пользователь нажимает на кнопку Больше, он открывает модал с большим количеством категорий, у модала есть это содержимое:
<div class="modal fade bd-example-modal-lg" id="categoriesModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-body">
<div class="container">
<div class="row">
<ul class="modal-list row">
<li class="col-lg-4 col-md-6 col-sm-12">
<a class="">All categories</a>
</li>
@foreach($categories as $category)
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ $category->image }}"/>
<a name="category" id="{{$category->id}}">{{$category->name}}</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
IУ меня есть jquery для выполнения ajax-запроса, чтобы получить конференции, которые относятся к категории, по которой щелкнули.Это работает нормально.
Но я хочу, чтобы выбранная категория стала активной в меню "Categories__Menu".Это работает, выбранная категория остается активной.
Но есть одна проблема.При щелчке по категории в «Categories__Menu» элемент списка «Дополнительно» изменяет текст на текст этой категории clicekd.Ты знаешь почему?Элемент «Дополнительно» должен оставаться с текстом нажатого элемента, только если этот элемент находится в модальном меню, а не в меню «Categories__Menu».
возиться с проблемой без ajax-части: https://jsfiddle.net/69LnLa7y/2/
Знаете ли вы, где проблема?
$("a[name='category']").on('click', function(){
alert("test");
$('#showCategories').html($(this).text()+' <i class="fa fa-caret-down" aria-hidden="true"></i>');
$('#showCategories').addClass('active');
var category_id = $(this).attr("id");
alert(category_id);
$(this).parent('li').addClass('active');
$.ajax({
url: '{{ route('category.conferences',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#conferences').empty();
var newConferences='';
var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, conference) {
var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
newConferences += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
' <div class="card box-shaddow">\n' +
' <img class="card-img-top" src='+ conference.image +' alt="Card image cap">\n' +
' <div class="card-body">\n' +
' <h5 class="card-title">'+conference.name+'</h5>\n' +
' </div>\n' +
' </div></div>';
});
$('#conferences').html(newConferneces);
},
error: function(error) {
console.log(error.status)
}
});
});