表示後にdivを表示する

Question

私は現在、このwebsiteに取り組んでいます。

私のインデックスにあるプロジェクトにカーソルを合わせると、数字が表示されます。私はプロジェクトをクリックすると番号がそこにとどまるようにしています。別のプロジェクトをクリックすると再び消えます。

$('.project').mouseover(function(){ 
    $(this).prev().show() 
}) 
$('.project').mouseout(function(){ 
    $(this).prev().hide() 
}) 
$('.project').click(function(){ 
    $(this).prev().show() 
}) 

HTML：：

  <!-- Project --> 
       <div data-accordion> 
      <!-- Number --> 
        <div class="number" id="n1">1</div> 
      <!-- Title --> 
        <a class="project slide-link" id="p1" data-slide-id="1" data-control>Midi Matilda</a> 

      <!-- Tags --> 
        <a class="tag t1">(Identity)</a> 
        <a class="tag t1">(Music)</a> 

         <div data-content> 

          <div class="info">This project is cool.</div> 

         </div> 
       </div> 

      <!-- Project --> 
       <div data-accordion> 
      <!-- Number --> 
        <a class="number" id="n2">2</a> 
      <!-- Title --> 
        <a class="project slide-link" id="p2" data-slide-id="2" data-control>The Independent</a> 
      <!-- Tags --> 
        <a class="tag t2">(Poster)</a> 

         <div data-content> 

           <div class="info">This project is cooler.</div> 

         </div> 
       </div> 

NEWはJQuery：

//$('.project').mouseover(function(){ 
    // $(this).prev().show() 
    //}) 
    //$('.project').mouseout(function(){ 
    // $(this).prev().hide() 
    //}) 

    $('.project').click(function(){ 
     var id = $(this).attr("id"); 
     hideOthers(id); 
     $(this).prev().show(); 
    }); 

    function hideOthers(id){ 
     $('.project').not('#' + id).prev().hide(); 
    } 

^T

は今の私のコードは次のようになりますここでの問題は、プロジェクトの上に乗るときに番号が表示されなくなることです。同じプロジェクトのタイトルをもう一度クリックすると、番号は消えません。

Answer 1

です。ですから、このような数字の可視性を設定するためにCSSセレクタを使用することができます。

/* Show on hover */ 
[data-accordion]:hover > .number {display:block} 

/* Show when clicked/open */ 
[data-accordion].open > .number {display:block} 

Answer 2

この

を試してみてください

var flag = false; 

$('.project').mouseover(function(){ 
    if(flag == false) 
     $(this).prev().show() 
}) 
$('.project').mouseout(function(){ 
    if(flag == false) 
     $(this).prev().hide() 
}) 
$('.project').click(function(){ 
    if(flag == false){ 
     $(this).prev().show() 
    }else{ 
     $(this).prev().hide() 
    } 
    flag = !flag; 
}) 

Answer 3

これは、クリックされた要素のIDを取得し、他の人を隠しながら、前の要素を示しています。

希望すると便利です。ここで

    $('.project').click(function(){ 
     var id = $(this).attr("id"); 
     hideOthers(id); 
     $(this).prev().toggle(); 
    }); 

    function hideOthers(id){ 
     $('.project').not('#' + id).prev().hide(); 
    } 

は、アコーディオンが開いたらあなたはオープンクラスが設定されている、（あなたが参照ウェブサイト上で）あなたのコードを見て、これを達成するためにJavaScriptを使用する必要はありませんfiddle