javascript - メニューの表示/非表示

Question

タイトルをクリックすると内容が表示されるメニューを作りたいです。以下のGoogleのInspect要素とまったく同じようにしたい：

私はこのコードを書くことができました：

<script>
$("label").click(function () {
  $("p").slideToggle("fast");


if ($((this).html).find('&#9654;'));
{   
    document.getElementById("lbl_name").innerHTML = '&#9660;' + document.getElementById("lbl_name").innerHTML.substring(1);

}   

else if ($((this).html).find('&#9660;'));
{   
    document.getElementById("lbl_name").innerHTML = '&#9654;' + document.getElementById("lbl_name").innerHTML.substring(1);
} 


});

&96... は右矢印と下矢印です

しかし、私はこのコードに問題があります: 1- 最初に矢印を変更した後、再度変更しないため、機能しません。

2-関数を要素IDで機能させたくない.1つだけでなく多くのテキストで機能させたいので、たとえば、すべての段落タグを変更するのではなく、関数の呼び出し元で機能させたい.

html:

    <label id="lbl_name">&#9654;Toggle</label>
  <p>
    This is the paragraph.
  </p>

Answer 1

似たようなものを作りました... イベント内で何をするかをキャプチャしてみてください。id を使用しない場合は、class intead を使用するか、.next()私が行ったように jquery 関数を使用してみてください。

$('p > .arrow').on('click', function(e) {
  var $el = $(e.target);
  if($el.hasClass('arrow-right')) { // so this is hide! show it
    $el.next('p').slideDown('fast');
    $el.removeClass('arrow-right');
    $el.addClass('arrow-down');
  }
  else { // is visible, hide it
    $el.next('p').slideUp('fast');
    $el.addClass('arrow-right');
    $el.removeClass('arrow-down');
  }
});

HTML は次のようにする必要があります。

<p>
  <span class="arrow arrow-right"></span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp
  <p><span class="arrow arrow-right"></span>Lorem ipsum dolor sit amet, consect</p>
</p>

Answer 2

html:

<label><span>&#9654;</span>Click Me</label>
<p class="p">this is a sample text..</p>

CSS:

         <style>
            .p {
              display: none; 
            }                
        </style>

javascript: // 1.9 より前の jquery をお持ちの場合は、toggle

        <script>
            $(function(){
                $("label").toggle(function(){
                    $(this).find("span").html('&#9660;');
                    $(this).next("p").slideDown(500);
                },function(){                    
                    $(this).find("span").html('&#9654;');
                    $(this).next("p").slideUp(500);
                });
            });            
        </script>