1

На странице есть раскрывающийся список:

<ul class="compound_list">
  <li>Языки программирования
    <ul>
      <li><a href="/lang/php">PHP</a></li>
      <li><a href="/lang/perl">Perl</a></li>
      <li><a href="/lang/python">Python</a></li>
    </ul>
  </li> 
  <li>Интегрированные среды программирования
    <ul>
      <li><a href="/ide/eclipse">Eclipse</a></li>
      <li><a href="/ide/netbeans">NetBeans</a></li>
      <li><a href="/ide/visual_studio">Visual Studio</a></li>
    </ul>
  </li> 
</ul>

jQuery:

$(function(){
  $('.compound_list li').css({'list-style-image': 'url(/img/plus.gif)'});
  $('.compound_list li:not(:has(ul))').css({'list-style-image': 'none'});
  $('.compound_list ul:not(:has(ul))').css({'list-style-image': 'none'}).hide();
  $('.compound_list li:not(:has(ul))').click(function(){
    window.open($(this).attr('htef'), '_self'); 
  });
  $('li:has(ul)').click(function(){
    if ($(this).children().is(':hidden')) {
      $(this).css({'list-style-image': 'url(/img/minus.gif)'});
      $(this).children().show();
    } else {
      $(this).css({'list-style-image': 'url(/img/plus.gif)'});
      $(this).children().hide();
    }
  });
});

При клике на элементы верхнего уровня раскрываются/скрываются их подразделы. Все прекрасно и происходит именно то, что нужно.

Но поскольку вложенные списки входят в <li></li> верхнего уровня, при клике на ссылки список успевает свернуться до перехода на другую страницу. Как сделать, чтобы в данном случае списки не сворачивались?

1 ответ 1

6

Я только понять не могу - зачем вам это?

// ...
window.open($(this).attr('htef'), '_self');
//...

Просто переход по ссылкам уже не работает?


Смотрим пример тут - http://jsfiddle.net/Deonis/2phUf/

jQuery

$(function(){
    var firstLvl = $('.compound_list > li');
    var secondLvl = $('.compound_list ul li').hide();

    secondLvl.click(function(evt){
        evt.stopPropagation();
    });

    firstLvl.click(function(){
        $(this).toggleClass('minus')
            .find(secondLvl).toggle(function(){
                $(this).children().show();
            });
    });
});

CSS

.compound_list > li {
    list-style: url('/img/plus.gif');
    cursor: pointer;
}
.minus {
    list-style: url('/img/plus.gif') !important;
}
li > ul > li {
    list-style: none;
}
1
  • Спасибо! Фактически оказалось достаточно этого: $('.compound_list ul li').click(function(evt){ evt.stopPropagation(); }); 6 июн 2012 в 1:54

Ваш ответ

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

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