1

これまでのところ、皆さんは私がこの小さなことをうまく機能させるのに非常に役立ちました。もう 1 つお願いがあります。

このマークアップ:

          <div id="themes">
          <h2>Research Themes</h2>
            <ul>
              <li class="tier_1"><a class="enviro" 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="off.html"><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 class="health" 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 class="defense" 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 -->

そして、このjQuery：

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

この気の利いた「テーマ」スライダーを作成して、このページの右側の列で作業を確認できます: http://clients.pixelbleed.net/biodesign/

これには 2 つの問題があります... tier_2 ul の下のリンクの 1 つにヒットすると、ホバーがスライドの上下を引っ込めます。ネストされたliを誰かがホバリングするとき、スライドアウトのままにしたいと思います。したがって、スライドは tier_1 要素のホバー時にのみ発生するはずです。また、ホバー時に「アクティブな」クラスを tier_1 リンクの a 要素に追加したいと思います。したがって、[a class="enviro"..] はホバーすると [a class="enviro active"] になります。これは、他の tier_1 アイテムの 1 つがホバーされると削除されます。このようにして、誰かがネストされた要素を見ている間、きれいな色のアイコンを表示したままにすることができます。

ホバーですべてが可能かどうかさえわかりませんが、誰かがそれがここにある方法を知っているかどうかはわかりません.

4

1 に答える 1

1

mouseoutおそらく、テーマ DIV にハンドラーが必要だと思います。これは、ネストされたすべての ul をスライドアップしmouseover、各tier_1アンカーのハンドラーは、他のネストされた ul を閉じ、ネストされた ul をスライドして開きます。そうすれば、別のパネルに切り替えたとき、または thes div から完全に抜けたときにのみ、パネルを閉じることができます。mouseoutテーマ DIV で最後の選択を選択したままにしたい場合は、 を省略できます。

$(function(){
  $('div.themes').mouseout(function() {
       $('.tier_2:visible').slideUp();
       $(this).find('a.active').removeClass('active');
  });
  $(".tier_1 > a").mouseover(function() {
    var $this = $(this);
    $this.closest('div').find('a.active').not($this).removeClass('active');
    $this.addClass('active');
    var currentList = $this.parents('li').find('.tier_2'); 
    $(currentList).not(':visible').slideDown(); 
    $('.tier_2:visible').not(currentList).slideUp(); 
    return false; 
  }); 
});
于 2010-04-15T18:37:36.540 に答える