0

さて、jQueryに関しては、800ポンドのゴリラが針を通そうとしているような気がします。リスト上で単純な表示/非表示（できればスライドインとスライドアウト）を実行するスクリプトが必要です。

私のマークアップは次のようになります。

          <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は非表示クラスを削除し、その中に含まれているliはスライドアウトしますが、同時に他のすべてのul.tier_2をチェックして確認する必要があります。非表示クラスを取得するため、一度に展開できるテーマは1つだけです。

私はいくつかのことを試すためにサンドボックスを設定しました：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の手が覗き見をする傾向があるかもしれないということを意味するなら、私は非常に感謝するでしょう。トランジションをスライドインおよびスライドアウトする方法についてもアドバイスできれば、それも素晴らしいことです。

4

2 に答える 2

2

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;
  });
});​

</ p>

于 2010-04-13T22:36:26.040 に答える
0

または、次を使用することもできます。

$(".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」オブジェクトを取得するため、大きなページでは実際に遅くなる可能性があります。

于 2010-04-13T22:42:14.793 に答える