隐藏/显示菜单Javascript

我想制作一个菜单，点击标题显示内容。我想让它酷似一个在下面谷歌的检查元素： enter image description here 隐藏/显示菜单Javascript

我设法写代码：

<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>

来源

2013-04-07 Marwan El-Sayed

什么是你的（相关/ [SSCCE（HTTP： //sscce.org/））HTML？你可以[显示一个演示]（http://jsfiddle.net/）你已经有了什么？ – 2013-04-07 11:15:52

我添加了html。 – 2013-04-07 12:56:51

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>

来源

2013-04-07 11:12:41 mehdi

感谢，但我不能得到它的工作，我添加了HTML，CSS和JS，但是当我点击文本段落不会出现。 – 2013-04-07 12:53:50

我做了类似的事情......尝试捕捉事件内部要做的事情。为了不使用ID，请尝试使用类这一翻译或只是.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>

来源

2013-04-07 11:27:40 silviomoreto

请给我举个例子，因为我只是一个初学者，我不知道该把这些课放在哪里。 – 2013-04-07 12:54:20

请参阅上面的HTML示例 – silviomoreto 2013-04-08 10:38:39

隐藏/显示菜单Javascript

回答

相关问题