JQuery переключить активный пункт меню в зависимости от страницы

Question

Я сейчас работаю над системой меню для этого сайта .

У меня есть следующий код, который работает нормально:

$('#menu .container ul li:not(:first-child)').fadeOut()

$('#menu .container ul li:first-child').click(function() {
    $(this).siblings().fadeToggle();
})

Я простоскрывая все пункты меню, чтобы немного очистить навигацию.Теперь я хочу, чтобы браузер определил, какой раздел вы сейчас просматриваете (например, если вы смотрите на Magda в разделе «Последние работы»), и автоматически отобразите этот раздел.Я не совсем уверен, как это сделать.Может быть, определить URL-адрес, а затем найти URL-адрес в #menu .container и .show() всех его братьев и сестер при загрузке?Кто-нибудь может помочь с этим?

Answer 1

$("#menu a").each(function() {
  if($(this).attr('href') == window.location.href) {
    //Show the menu.
  }
});

Вы должны будете заполнить бит, который на самом деле показывает меню.Дайте мне знать, если вам также понадобится помощь.

Я кратко проверил ее в консоли Chrome Javascript, и, похоже, он нашел правильный элемент.Обязательно протестируйте его в нескольких браузерах.Я думаю, что это также зависит от элемента href в каждой ссылке, который является «полным» URL, включая http:// и имя домена.Если они являются относительными ссылками (например, /home), вы можете использовать window.location.pathname вместо window.location.href.

Answer 2

Вы можете добавить определенный класс для элемента с помощью PHP, а затем найти элемент с помощью jQuery и показать его.

Например:

<ul>
<li class="<?=($page_1 == $selected_page ? "active" : "");?>">Page 1</li>
<li class="<?=($page_2 == $selected_page ? "active" : "");?>">Page 2</li>
<li class="<?=($page_3 == $selected_page ? "active" : "");?>">Page 3</li>
</ul>

Затем с помощью jQuery:

$('#menu .container ul li.active:first-child').click(function() {
    $(this).siblings().fadeToggle();
})

Если меню печатается на PHP автоматически, это может быть легко реализовано.

Другой подход - не скрывать выбранное меню, поэтому оно мгновенно расширяется:)

Answer 3

Я вижу, у вас есть класс тела в разделе-n на каждой странице. Если вы можете применить класс к ul каждого элемента родительского меню, вы сможете показать или скрыть подменю, используя

.menuparent ul { display: none; }
.bodyclass .menuparent ul { display: block; }

- изменить--

Только что видел, что это не закодировано таким образом:

<ul>
  <li class="menuparent">menu parent
    <ul>
      <li>menu sub 1</li>
      <li>menu sub 2</li>
    </ul>
  </li>
</ul>

Что потребуется для моего ответа на работу. Возможно, это лучший способ кодировать его, если вы можете, так как это система меню родитель-потомок.