0

У меня есть меню уже с подсветкой активного пункта меню. Но если я делаю выпадающее меню то при нажатии на элемент в выпадающем меню оно подсвечивается но не подсвечивается его родитель получается. Тоисть сейчас при нажатии на "Распродажа" она светиться а при нажатии на "Пункт" 1 он светится а "Распродажа" нет( вот ссылка на статью откуда я взял код https://snipp.ru/jquery/active-menu-jquery В js я не разбираюсь, буду рад советам или другим статьям) И реализовать я это хочу на WordPress (стандартное меню и плагины мне не подходят потому что особое меню поэтому пишу с нуля)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="wrp">
    <div class="left-col">
        <ul class="left_menu js_menu">
            <li><a href="#">Спецпредложения</a></li>
            <li><a href="#">Распродажа</a></li>
        <ul>
          <li><a href="#">Пункт 1</a></li>
          <li><a href="#">Пункт 2</a></li>
          <li><a href="#">Пункт 3</a></li>
        </ul>
            <li><a href="#">Акции</a></li>
        </ul>
    </div>

</div>
<style type="text/css">
.wrp {
    overflow: hidden;
}
.left-col {
    width: 250px;
    float: left;
}
.right-col {
    margin-left: 280px;
}
h1 {
    padding: 0;
    margin: 0 0 30px 0;
}

.left_menu {
    margin: 0 0 30px 0;
    padding: 0;
    background: #f2f2f2;
    border: 1px solid #ddd;
    display: block;
}
.left_menu li {
    margin: 0;
    padding: 0;
    display: block;
}
.left_menu a {
    display: block;
    font-size: 16px;
    color: rgb(40, 40, 40);
    font-weight: bold;
    line-height: 1.25;
    padding: 10px 10px;
    border-bottom: 1px solid #d9d9d9;
    background: url(https://snipp.ru/demo/247/left_menu.png) 95% 50% no-repeat;
    text-decoration: none;
}
.left_menu a.active {
    color: #fff;
    background-color: #0546a2;
}
</style>

<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function($){
    var url = document.location.href;
    var pos= url.indexOf("#");
    if (pos > 0) {
        url = url.substring(0, pos);
    }
    $.each($('.js_menu a'), function(index, value) {
        if (url.indexOf($(this).attr('href')) + 1) {
            $(this).addClass('active').parent().addClass('active');
        }
    });
});
</script>
</body>
</html>
3
  • Оформите код в виде запускаемого сниппета, пожалуйста. 12 фев 2022 в 19:18
  • я указал ссылку, там он запущен 12 фев 2022 в 19:19
  • по ссылке не полный код, оформите здесь как полагается 12 фев 2022 в 19:23

1 ответ 1

0

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.