jQueryのパネル機能の「表示/非表示」ボタンの実装に関する問題？

Question

私はブログサイトを作っています。このページでは、いくつかのブログエントリが必要です。ユーザーが「表示」ボタンを押してパネルを下にスライドさせて、特定のブログエントリを表示できるようにします。その後、ボタンはjQueryを使用して「非表示」と変更されます。次に、ユーザーが「非表示」ボタンをクリックすると、ブログエントリがスライドして再び非表示になります。いくつかのブログエントリは、同時に表示（または非表示）できる必要があります。

これは私のコードの抜粋です： stories.html

  <div style="width:100%;"> 
       <div class="panel-header" rel="blog-panel1"> 
        <h2>Blog Title #1</h2> 
        <button type="button">Show</button> 
        <h4>Date #1</h4> 
       </div> 
       <div class="panel" id="blog-panel1" > 
        <p>Some Paragraph #1</p> 
       </div> 
       <div class="panel-header" rel="blog-panel2"> 
        <h2>Blog Title #2</h2> 
        <button type="button">Show</button> 
        <h4>Date #2</h4> 
       </div> 
       <div class="panel" id="blog-panel2"> 
        <p>Some Paragraph #2</p> 
       </div> 
      </div> 

main.js .panelが設定されている私ののmain.cssファイルでは、

$(function() { 
    $(".panel-header button:contains('Show')").on("click", function() { 
     //show 
     $(this).text("Hide"); 

     var panelToShow = $(this).parent().attr('rel'); 

     $('#'+panelToShow).slideDown(300, function() { 
      $(this).addClass('active'); 
     }); 
     //hide 
     $(".panel-header button:contains('Hide')").on("click", function() { 
      $(this).text("Show"); 

      var panelToHide = $(this).parent().attr('rel'); 

      $('#'+panelToHide).slideUp(300, function() { 
       $(this).removeClass('active'); 
     }); 
    }); 
}); 

display: none.panel.activeはdisplay: blockと設定されています。

私は既に、JavaScriptの隠す部分をコールバックの外に置こうとしました。しかし、それはうまくいかなかった（すなわち、ブログエントリを表示することしかできなかったが、それを隠すことはできなかった）。

これは、ブログエントリを表示したり非表示にしたりできました。その後、奇妙なことをするようになります。 「表示」ボタンをクリックすると、スライドしてすぐにスライドアップします。

どのような助力も大歓迎です！

EDIT解決策が見つかりました。私はまだ上記が間違っているのかどうか、またはスクリプトの外側に隠れた部分を置くのは間違っている（私はJS/jQueryを初めて使っている）人がまだそれを私に説明することができれば、それは素晴らしいだろう。しかし、以下のコードは動作します。私は単純なif/else文を追加しました。

$(".panel-header button").on("click", function() { 
     if ($(this).text() == "Show") { 
      $(this).text("Hide"); 

      var panelToShow = $(this).parent().attr('rel'); 

      $('#'+panelToShow).slideDown(300, function() { 
       $(this).addClass('active'); 
      }); 
     } 
     else { 
      $(this).text("Show"); 

      var panelToHide = $(this).parent().attr('rel'); 

      $('#'+panelToHide).slideUp(300, function() { 
       $(this).removeClass('active'); 
      }); 
     } 

    }); 

Answer 1

あなたのコードの最初のバージョンは、自身の利益のためにあまりにも複雑でした。またShow機能の中にHide機能がありました。

コードを単純化しようとしました。それをチェックアウト：

$(".panel-header button").on("click", function() { 
 
\t // We'll save this jQuery selection on a variable 
 
\t // since we'll use it more than once. 
 
    // This helps the performance of our script, 
 
    // because jQuery will only look for the element once. 
 
\t var $this = $(this); 
 
    
 
    // This is a ternary if. Just like a regular if but smaller. 
 
    // Perfect to assign different values to the same variable 
 
    // in different situations 
 
\t var btnText = ($this.text() === 'Show') ? 'Hide' : 'Show'; 
 

 
\t $this 
 
    \t .text(btnText) 
 
    \t .parent() 
 
    .next('.panel') 
 
    .slideToggle(); 
 
});

.container { 
 
    width: 100%; 
 
} 
 

 
h2, 
 
h4 { 
 
    margin: 5px; 
 
} 
 

 
.panel-header { 
 
    background: grey; 
 
} 
 

 
.panel-header { 
 
    background: grey; 
 
    margin-bottom: 10px; 
 
    overflow: hidden; 
 
} 
 

 
.panel-header h2 { 
 
    float: left; 
 
} 
 

 
.panel-header h4, 
 
.panel-header button{ 
 
    float: right; 
 
} 
 

 
.panel-header h2 { 
 
    float: left; 
 
} 
 

 
.panel { 
 
    display: none; 
 
} 
 

 
.panel p { 
 
    margin: 0; 
 
    padding: 0 10px 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="panel-header"> 
 
    <h2>Blog Title #1</h2> 
 
    <button type="button">Show</button> 
 
    <h4>Date #1</h4> 
 
    </div> 
 
    <div class="panel"> 
 
    <p>Some Paragraph #1</p> 
 
    </div> 
 
    <div class="panel-header"> 
 
    <h2>Blog Title #2</h2> 
 
    <button type="button">Show</button> 
 
    <h4>Date #2</h4> 
 
    </div> 
 
    <div class="panel"> 
 
    <p>Some Paragraph #2</p> 
 
    </div> 
 
</div>

Answer 2

ここでは、アコーディオンを行う方法があります。私はtoggleClassを使用し、max-heightを「アクティブ」クラスに設定します。そして、アニメーションはCSSにあります。

$('.panel-header').click(function(){ 
 
    $(this).parent().toggleClass('active'); 
 
});

.panel { 
 
    margin-bottom: 30px; 
 
} 
 

 
.panel-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
.active .panel-content { 
 
    max-height: 1000px; 
 
    transition: all 1s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul style="width:100%;"> 
 
    <li class="panel" rel="blog-panel1"> 
 
    <div class="panel-header"> 
 
     <h2>Blog Title #1</h2> 
 
     <button class="button" type="button">Show</button> 
 
     <h4>Date #1</h4> 
 
    </div> 
 
\t \t 
 
\t \t <div class="panel-content" id="blog-panel1" > 
 
\t  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> 
 
\t </div> 
 
    </li> 
 

 
    <li class="panel" rel="blog-panel2"> 
 
    <div class="panel-header"> 
 
     <h2>Blog Title #2</h2> 
 
     <button class="button" type="button">Show</button> 
 
     <h4>Date #2</h4> 
 
    </div> 
 

 
\t \t <div class="panel-content" id="blog-panel2"> 
 
\t  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> 
 
\t </div> 
 
    </li> 
 
</ul>