隱藏/顯示菜單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

回答

相關問題