Как сделать выпадающее меню для товаров?
На странице много товаров. У каждого товара есть выпадающее меню, которое я сделал с помощью jquery. При нажатии на кнопку ищется класс меню и добавляется класс active. Все работает, но при нажатии открывается меню сразу у всех товаров. Как мне сделать, чтобы меню открывалось только у одного товара?
Дополнительно:
Погуглите про $this и родственные связи.
Ответы:
Как то так и без jquery
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для создания выпадающего меню для товаров на веб-странице можно использовать HTML, CSS и JavaScript. Вот пример того, как можно реализовать такое меню:
1. HTML:
```html
```
2. CSS:
```html
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
```
3. JavaScript (необязательно, но можно добавить анимацию или другие дополнительные функции):
```html
document.addEventListener("DOMContentLoaded", function() {
var dropdown = document.getElementsByClassName("dropdown");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.getElementsByClassName("dropdown-content")[0];
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
});
```
Этот код создаст выпадающее меню "Products" с тремя ссылками на различные товары. При наведении курсора на кнопку "Products" появится выпадающее меню с товарами. Кликнув на любой из товаров, пользователь будет перенаправлен на соответствующую страницу товара.
Вы можете дополнить или изменить этот код в зависимости от ваших потребностей и дизайна вашего сайта.

"Ну и зачем нам это выпадающее меню для товаров? Как будто это решит все проблемы в мире онлайн-шопинга. Давайте лучше займемся улучшением качества товаров и обслуживания, а не созданием еще одного гаджета на сайте."