Активные ссылки jquery superfish - PullRequest
Новая
       16

Активные ссылки jquery superfish

2 голосов
/ 15 декабря 2010

У меня есть вопрос.Я использую jquery superfish menu со следующей структурой 

<div id="menu" class="ge-navigation-item">
  <!-- navigation -->
    <ul id="test" class="sf-menu sf-vertical sf-js-enabled sf-shadow">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="index.html">Index</a></li>
          <li><a href="#">Page</a>
                            <ul>
                                <li><a href="#">menu item</a></li>
                                <li><a href="#">menu item</a></li>
                                <li><a href="proef.html">menu item</a></li>
                                <li><a href="index.html">index</a></li>
                                <li><a href="#">menu item</a></li>
                            </ul>
          </li>
          <li><a href="page-fullwidth.php">Page - Full Width</a></li>
        </ul>
      </li>
      <li><a href="showcase.php">Showcase</a></li>
    </ul>
    <!-- /navigation -->
  </div>

. Я хочу, чтобы при нажатии на ссылку структура меню была видна

. Поэтому при нажатии на index.html ссылка будет установлена ​​навсе ссылки с href index.html Но нажатие на proef.html установит активный класс для href proef.html - Страница - О

Пока я пробовал это, но с плохими результатами 

var path = window.location.toString().split("/")
path = path[path.length - 1]
//alert (path);
if (path)
$("#test a[href='" + path + "']").addClass("actief");
$("#test ul li:has(a) a[href='" + path +
     "']").parent().parent().parent().addClass("actief");

Ответы [ 2 ]

2 голосов
/ 15 декабря 2010

Добро пожаловать в stackoverflow. Попробуйте это: 

var path = window.location.pathname.split('/');
path = path[path.length-1];

if (path !== undefined) {
    $("#menu3").find("a[href='" + path + "']").addClass("actief");

}

Это должно применить класс к любой ссылке, которая соответствует последнему элементу текущего URL. Если вы искали другое поведение, пожалуйста, уточните!

UPDATE
На самом деле, похоже, вам нужно это: 

var path = window.location.pathname.split('/');
path = path[path.length-1];

if (path !== undefined) {
    $("#menu3")
        .find("a[href$='" + path + "']") // gets all links that match the href
        .parents('li')  // gets all list items that are ancestors of the link
        .children('a')  // walks down one level from all selected li's
        .addClass('actief');
}

Это поместит класс в каждый элемент a в цепочке.

1 голос
/ 26 августа 2011

мы сделали что-то вроде: 

$("#sample-menu-1").find("a[href='"+window.location.pathname+"']").each(function() {
$(this).parents('li').addClass("current");
$(this).closest('ul').css("visibility","visible").css("display","block");
});

Кажется, это работает, но при наведении курсора на меню меню не удерживает текущую позицию.

=== обновление ===

Похоже, родительский ul сбрасывается, чтобы не отображаться после наведения мыши на меню

...