1

以下の HTML コードをご覧ください。

<div class="accordion">
<ul>
   <li class="box1">
     <div class="normal"> CONTENT HERE </div>
     <div class="expanded"> CONTENT HERE </div>
     <div class="hidden"> CONTENT HERE </div>
   </li>
   <li class="box2">
     <div class="normal"> CONTENT HERE </div>
     <div class="expanded"> CONTENT HERE </div>
     <div class="hidden"> CONTENT HERE </div>
   </li>
   <li class="box3">
     <div class="normal"> CONTENT HERE </div>
     <div class="expanded"> CONTENT HERE </div>
     <div class="hidden"> CONTENT HERE </div>
   </li>
</ul>
</div>

基本的には、jQuery プラグインを利用したアコーディオンです。3 つのボックスがあり、ユーザーがホバリングしているボックスに応じて、内側の div (通常、展開、非表示) を表示または非表示にしたいと考えています。シナリオは次のとおりです。

  1. デフォルトでは、すべての div.normal がデフォルトで表示され、div.expanded と div.hidden は非表示になります。
  2. たとえば、ユーザーが li.box1 にカーソルを合わせると、その div.expanded が表示され、div.normal と div.hidden が非表示になります。ただし、li.box2 と li.box3 の場合、それぞれ div.hidden のみが表示され、残りの div は非表示になります。

私はコードから始めましたが、どこにも行かないと思います。(私はデザイナーです。)

複雑に聞こえますが、jQuery を使用して簡単に実行できることはわかっています。

更新：これまでに行ったことは次のとおりです。

$(document).ready(function () {
  $(".accordion li").hover(function () {

    $(this).siblings().children(".normal").hide();
    $(this).siblings()..children(".hidden").delay(700).show();
    $(this).children(".expanded").delay(700).show();

    }, function () {

    $(this).siblings().children(".normal").delay(700).fadeIn("fast");
    $(this).siblings().children(".hidden").fadeOut("fast");
    $(this).children(".expanded").fadeOut("fast");

  });
});
4

2 に答える 2

0 
$(document).ready(function(){

        $('.expanded').hide();

        $('.box1').hover(function(){
                    $('.expanded').show();
        });
});

これは、jQueryでDOM要素を表示および非表示にする方法です。思い通りのセットにしてください。

于 2012-05-09T03:40:45.587 に答える
0

ホバーイベントにstyle='display：none'を使用すると、最初にdivを非表示にできます。

  $("li.box1").hover(function(){
     $(this).find('.expanded').show();
     $(this).find('.hidden').show();
    $(this).find('.normal').hide();
 });
于 2012-05-09T03:42:58.427 に答える