Форум

Letto · #1 (**permalink**) 04.12.2013, 14:31

Приветствую Вас, уважаемое сообщество. Интересует вопрос:
Есть меню следующего вида:

<ul>
    <li><a href="/1"><span>Пункт меню 1</span></a>
        <ul>
          <li><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
          <li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
          <li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
        </ul>
    </li>
    <li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>

При переходе в Пункт меню 1, то ему автоматически присваивается класс .active и вложенные пункты при наличии этого класса раскрываю, если же мы идем дальше и заходим в Пункт меню 1.1, то класс с Пункт меню 1 сбрасывается и раскрывающийся список сворачивается чего быть не должно.
По сути при присутствии на странице Пункт меню 1.1, то исходный код должен выглядеть вот так:

<ul>
    <li class="active"><a href="/1"><span>Пункт меню 1</span></a>
        <ul>
          <li class="active"><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
          <li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
          <li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
        </ul>
    </li>
    <li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>

Вот сам код jQuery:

$(document).ready(function(){
    var link = window.location.pathname;
    $('.nav li a[href="'+link+'"]').parent().addClass('active');
  });

что и куда нужно дописать? я в программировании полный чайник.
Прошу помощи у Вас

думаю не одного меня этот вопрос интересует.

рони · #2 (**permalink**) 04.12.2013, 15:00

Letto,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .active {
      border: #FF0000 2px solid;
    }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
    //var link = window.location.pathname;
    var link =  '/1-1';
    $('.nav li a[href="'+link+'"]').parents('li').addClass('active');
  });

</script>
</head>

<body>
<ul class="nav">
    <li><a href="/1"><span>Пункт меню 1</span></a>
        <ul>
          <li><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
          <li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
          <li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
        </ul>
    </li>
    <li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>

</body>

</html>

Letto · #3 (**permalink**) 04.12.2013, 15:30

рони,
спасибо огромное !!

<script type="text/javascript">
	$(document).ready(function(){
		var link = window.location.pathname;
		$('.nav li a[href="'+link+'"]').parents('li').addClass('active');
	});
	</script>

Форум

Справочник

Discord чат

Курсы javascript