javascript - 隐藏/显示菜单 Javascript

Question

我想制作一个菜单，您可以在其中单击标题以显示内容。我想让它与下面的谷歌 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 一起使用，因为我希望它与许多文本一起使用而不仅仅是一个，所以我希望它与函数的调用者一起使用，而不是更改所有段落标签。

的HTML：

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

Answer 1

html:

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

CSS：

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

javascript: // 如果你有 jquery 早于 1.9 ，你可以使用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>

Answer 2

我做了类似的事情......尝试捕捉事件中的内容。要不使用 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>