Показать сообщение отдельно
  #1 (permalink)  
Старый 02.07.2021, 17:21
Новичок на форуме
Отправить личное сообщение для JustMeOnly Посмотреть профиль Найти все сообщения от JustMeOnly
 
Регистрация: 02.07.2021
Сообщений: 4

Открытие пункта меню при переходе на страницу
Здравствуйте, добрые люди!

Может, кто подскажет, как реализовать следующее решение:
есть меню (аккордеон) с ссылками на другие страницы. Как сделать, чтобы при переходе по ссылке (открытии другой страницы) пункт подменю раскрывался и подсвечивался?

HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin: 20px 0 0 46px">
  <a class="link" href="index.html">TO HOME</a>
</div>
<div id="menu">
  <ul>
    <li>
      <ul class="list">
        <li class="main">
          <a href="#" class="link">
            <div class="line">Раздел 1</div>
          </a>
        </li>
        <li class="sub">
          <ul>
            <li>
              <a href="page1.html" class="link">
                <div>Ссылка 1</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul class="list">
        <li class="main">
          <a href="#" class="link">
            <div class="line">Раздел 2</div>
          </a>
        </li>
        <li class="sub">
          <ul>
            <li>
              <a href="page2.html" class="link">
                <div>Ссылка 2</div>
              </a>
            </li>
            <li>
              <a href="page3.html" class="link">
                <div>Ссылка 3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<div class="cont"><br>
  <span>Страница 1</span>
</div>


CSS:
body {
  background: black;
}

.list {
  border: 2px solid gray;
  background: black;
  width: 220px;
  margin: 0 0 5px 0;
  padding: 4px 20px;
}

.list:hover {
  border: 2px solid white;
}

.sub {
  display: none;
}

.link {
  text-decoration: none;
  color: gray;
}

.link:hover {
  color: white;
}

ul,
li a {
  list-style-type: none;
  outline: none;
}

.cont {
  border: 2px solid gray;
  position: absolute;
  height: 150px;
  width: 300px;
  left: 320px;
  top: 16px;
  color: gray;
  text-align: center;
}


JS:
$(document).ready(function() {
  $('li.main a').click(function(e) {
    var dropDown = $(this).parent().next();
    $('.sub').not(dropDown).slideUp(240);
    dropDown.slideToggle(240);
    e.preventDefault();
  });
});


Заранее спасибо!
Ответить с цитированием