Как сделать выпадающее меню для товаров?

Ссылка скопирована
2 ответов

На странице много товаров. У каждого товара есть выпадающее меню, которое я сделал с помощью jquery. При нажатии на кнопку ищется класс меню и добавляется класс active. Все работает, но при нажатии открывается меню сразу у всех товаров. Как мне сделать, чтобы меню открывалось только у одного товара?

Дополнительно:

Погуглите про $this и родственные связи.

  • Используйте this либо просто forEach и вешать клик таким образом
  • Ответы:

    Как то так и без jquery
    snippet

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Максим Павлов Ответ

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

    Другие ответы (1) Ответить на вопрос
    Андрей PHP

    Для создания выпадающего меню для товаров на веб-странице можно использовать 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" появится выпадающее меню с товарами. Кликнув на любой из товаров, пользователь будет перенаправлен на соответствующую страницу товара.

    Вы можете дополнить или изменить этот код в зависимости от ваших потребностей и дизайна вашего сайта.

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно