Простое шоу / скрыть проблемы JQuery - PullRequest
Новая
       15

Простое шоу / скрыть проблемы JQuery

0 голосов
/ 14 апреля 2010

Хорошо, я чувствую себя как 800-фунтовая горилла, пытающаяся заправить иголку, когда дело доходит до jQuery. Мне нужен сценарий, который преформирует простое отображение / скрытие (желательно с хорошим скольжением) в списке.

Моя разметка выглядит так: 

          <div id="themes">
          <h2>Research Themes</h2>
            <ul>
              <li class="tier_1"><a href="">Learn about our approach to the <strong>environment</strong></a>
                <ul class="tier_2 hide">
                  <li><a href=""><em>How we are tying this all together</em></a></li> 
                  <li><a href=""><strong>Project:</strong> Solor Powered Biofactories</a></li> 
                  <li><a href=""><strong>Project:</strong> Cleaning Water with Nature</a></li>
                  <li><a href=""><strong>Project:</strong> Higher Efficiency Solar Technology</a></li>
                </ul>
              </li>
              <li class="tier_1"><a href="">Learn about our approach to <strong>human health</strong></a>
                <ul class="tier_2 hide">
                  <li><a href="">Project name numero uno goes here</a></li> 
                  <li><a href="">Project name numero dos goes here</a></li>
                  <li><a href="">Project name numero tres goes here</a></li>
                </ul>
              </li>
              <li class="tier_1"><a href="">Learn about our approach to <strong>national defense</strong></a>
                <ul class="tier_2 hide">
                  <li><a href="">Project name numero uno goes here</a></li> 
                  <li><a href="">Project name numero dos goes here</a></li>
                  <li><a href="">Project name numero tres goes here</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- // end themes -->

Вы можете видеть, что у каждого вложенного ul есть класс "tier_2" и "hide". В идеале, при щелчке по li, в который они вложены ("li.tier_1"), его дочерний элемент ul удалит класс hide, а содержимое li, содержащееся в нем, выскользнет, ​​но в то же время следует проверить все остальные ul.tier_2 и убедиться они получают класс скрытия - поэтому за один раз можно развернуть только одну тему.

Я настроил песочницу, чтобы попробовать кое-что: http://jsbin.com/odete/3

Мой JS выглядит так: 

$(function(){

$(".tier_1 a").each(function(i,o){
  $(this).click(function(e){
    e.preventDefault();
    $(this).addClass("show").siblings("ul").removeClass("show");
    $("ul.tier_2:eq("+i+")").show().siblings("ul.tier_2").hide();
  });
});

});

Совершенно глупый способ сделать это, я уверен. Но я основал его на другом сценарии, и он работает "немного", как вы можете видеть в песочнице.

Если бы один из вас имел в виду руки в jQuery, возможно, был бы настолько взволнован, чтобы взглянуть, я был бы очень благодарен. Если бы вы могли также посоветовать, как сделать переходы slideIn и Out, это также было бы здорово!

Ответы [ 2 ]

2 голосов
/ 14 апреля 2010

Замените код jQuery на: 

$(function(){
  $(".tier_1 > a").click(function() {
    var currentList = jQuery(this).parents('li').find('.tier_2');
    $(currentList).slideToggle();
    jQuery(this).parents('ul').find('.tier_2').not(currentList).slideUp();
    return false;
  });
});​

1004 *

0 голосов
/ 14 апреля 2010

В качестве альтернативы вы можете использовать: 

$(".tier_1 a").each(function(i,o){
  $(this).click(function(e){
    e.preventDefault();
    var wasShowing = $(this).siblings('ul:visible').length > 0

    // hide everything... 
    $('.tier_2').hide();
    // give everything the proper classes (hide, since we just hid everything)
    $(".show").addClass('hide').removeClass("show");

    // if the tier was not expanded, then show it... 
    // otherwise leave it hidden
    if (!wasShowing) { 
      $(this).siblings('ul').show();
      $(this).removeClass("hide").addClass("show");
    } 
  });});

Это действительно потенциально медленно на большой странице, так как захватывает все объекты ".tier_2".

...