Question

我想制作一个菜单，点击标题以显示内容。我想让它完全像下面Google的Inspect元素中的那个： enter image description here

我设法编写了这段代码：

<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);
} 


});

＆amp; 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，请尝试使用类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>

隐藏/显示菜单Javascript

2 个答案: