0

Добрый день. Есть выезжающие пункты меню, построенное на jquery. Недавно возникла необходимость сделать так, чтобы при переходе по дочерним элементам, пункты меню родительского элемента не скрывались. То есть, к примеру, перешли по ссылке Основные социально-экономические показатели развития, и этот небольшой блок ul остается открытым, в то время как последующие ul скрыты. Я решил попробовать так:

<script>
     if (document.location.href.indexOf("spisok") > -1) {
    $("ul").html().indexOf(document.location.href);
    $("ul").css("display", "block");
 }
    </script>

но не знаю как обратиться правильно к родителю. Ведь $('ul').css('display', 'block'); меняет всем ul элементам стиль. В общем суть в том, что если в location есть ?spisok, то ищется эта ссылка на странице и меняется класс родителя с display: none; на display: block; Вот такой кусок кода:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="gradient-list" style="display: block;">
   <li><a href="http://admsud.ru">Главная</a></li>
   <li><a onclick="$('#1').slideToggle('slow');" href="javascript://">Социльно-экономическое развитие</a></li>
   <ul class="gradient-list" id="1" style="display: none;">
      <li><a href="http://admsud.ru/ekonomika-rayona/socilno-ekonomicheskoe-razvitie-rayona/osnovnye-socialno-ekonomicheskie-pokazateli-razvit/?spisok#here">Основные социально-экономические показатели развития</a></li>
      <li><a href="http://admsud.ru/ekonomika-rayona/socilno-ekonomicheskoe-razvitie-rayona/ocenka-effektivnosti-deyatelnosti-oms/?spisok#here">Оценка эффективности деятельности ОМС</a></li>
      <li><a href="http://admsud.ru/ekonomika-rayona/socilno-ekonomicheskoe-razvitie-rayona/itogovoe-ekonomicheskoe-soveschanie/?spisok#here">Итоговое экономическое совещание</a></li>
      <li><a href="http://admsud.ru/ekonomika-rayona/socilno-ekonomicheskoe-razvitie-rayona/ocenka-reguliruyuschego-vozdeystviya/?spisok#here">Оценка регулирующего воздействия</a></li>
      <li><a href="http://admsud.ru/ekonomika-rayona/socilno-ekonomicheskoe-razvitie-rayona/socialno-ekonomicheskoe-razvitie-vladimirskoy-obla/?spisok#here">Социально-экономическое развитие Владимирской области</a></li>
   </ul>
   <li><a onclick="$('#2').slideToggle('slow');" href="javascript://">Инвестиции</a></li>
   <ul class="gradient-list" id="2" style="display: none;">
      <li><a href="http://admsud.ru/ekonomika-rayona/investicii/deyatelnost-koordinacionnogo-soveta-po-investiciya/?spisok#here">Деятельность координационного Совета по инвестициям</a></li>
      <li><a href="http://admsud.ru/ekonomika-rayona/investicii/investicionnyy-pasport-rayona/?spisok#here">Инвестиционный паспорт района</a></li>
      <li><a href="http://admsud.ru/ekonomika-rayona/investicii/investicionnye-ploschadki/?spisok#here">Инвестиционные площадки</a></li>
      <li><a href="http://admsud.ru/ekonomika-rayona/investicii/investicionnye-proekty/?spisok#here">Инвестиционные проекты</a></li>
   </ul>
   </ul>

2 ответа 2

1

Такое делается на стороне сервера. Но если нет варианта, то вот: 1 вариант - если нужно чтобы активный пункт был не по клику, а по открытой странице, то при загрузки странице берёте document.location.href и ищете свой пункт меню. примерное так:

$('a[href="' + document.location.href + '"]').closest('ul')

Если нужно по клику, то придётся не много извратится. по клику на нужную ссылку, берём href - кидаем в куки, далее при переходе на страницу делает, вытаскиваем из кук, и делаем тоже что и выше

$('.gradient-list .gradient-list').on('click', 'a', function(e){
  e.preventDefault();

  var $this = $(this);

// запоминаем href $this.attr('href')
  // кидаем его в куки
}) 

на новой странице

// вытаскиваем нужный кук (проверяем есть ли он)
$('a[href="' + кусок_строки_из_кук + '"]').closest('ul')

Это $('a[href="' + кусок_строки_из_кук + '"]') - выборка по параметру. Можете добавлять дата атрибуты и работать с ними (в document.location - есть более короткие записи чем href)

Ну это жуткое извращение. делайте проверку на сервере

1
  • Огромное спасибо! Пусть и небольшое извращение, но все же рабочее.Так как к php доступа к сожалению нет. Конечный вариант if (document.location.search.indexOf('spisok') > -1) { $('a[href="' + document.location.href + '"]').closest('ul').css('display', 'block'); }
    – Ilya_Ru
    9 фев 2018 в 22:38
-1

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

$("ul").on("click", function(){
  $(this).children().slideToggle();
})

название классов и id не может начинаться с цифр. Вообщем почитайте мой совет - почитайте книжечку по основам HTML

2
  • Вы меня немного не поняли... у меня при щелчке раскрывается список. При переходе на страницу, естественно, он опять становится скрытым. Мне же нужно, чтобы этот список был открыт после перехода на страницу. Ваш код имеет смысл только при ajax, то есть без перезагрузки страницы... а у меня эта перезагрузка есть...
    – Ilya_Ru
    9 фев 2018 в 6:47
  • Не нужно делать нерабочие сниппеты. Прежде, чем делать сниппет, проверьте его работоспособность.
    – And
    9 фев 2018 в 7:14

Ваш ответ

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

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