2016-02-26 134 views
0

我正在使用css和jquery構建自己的Accordion選項卡。 當一個標籤被點擊時,它應該是開放的,任何其他打開的標籤應該最小化或關閉,這是按照應該的方式工作。Jquery toggleClass無法正常工作

問題是當打開的標籤元素被點擊時,它也應該被關閉/最小化。我正在使用toggleClass,但它不能用於關閉相同的元素。意味着默認的CSS不會切換。我花了很多時間在這個代碼,但找出問題

例如,如果DIV與ID2和階級「開放」點擊它會顯示內容(工作),然後再次單擊時應當將其關閉(不工作) 這裏是我的代碼

Javascript代碼

<script type="text/javascript" > 
    $(document).ready(function(){ 
     $(document).on('click',function(e){ 
      if(e.target.nodeName == "H6") 
      { 
       var rootNode = e.target.parentElement.parentElement.getAttribute('id'); 
       var parentNode = e.target.parentElement.getAttribute('id'); 
       var childN = null; 
       for(var i = 0;i<document.getElementById(rootNode).childElementCount;i++) 
       { 
        if($(document.getElementById(rootNode).children[i]).height()>25) 
        { 
        //childN = $(document.getElementById(rootNode).children[i]); 
         childN = $(document.getElementById(rootNode).children[i]).attr('class'); 
         $(document.getElementById(rootNode).children[i]).removeClass('pp2'); 
         //$(document.getElementById(rootNode).children[i]).addClass('pp'); 
         break; 
        } 
       } 
    //     alert(childN); 
       //var childNode = document.getElementById(parentNode).childNodes[1].getAttribute('class'); 
       $(document.getElementById(parentNode)).toggleClass('pp2'); 
       //childN.toggleClass('pp'); 

       } 
      }); 
     }); 
    </script> 
+1

你沒有正確使用jQuery。你在用jQuery混合了vanilla Javascript,給你額外的工作,可以通過jQuery本身來最小化。 – Phiter

+0

in document.getElementById(),你爲什麼不傳遞ID作爲參數? – user2473779

+0

'toggleClass'不工作,或者它正在工作,但不會導致你想要的? –

回答

0

在代碼中的問題,而試圖關閉打開的標籤,它消除負責顯示內容到這裏以其優良的CSS但何時退出再循環下面的for循環切換類,以便打開的選項卡關閉並再次打開。

的代碼

瑕疵線

$(document.getElementById(parentNode)).toggleClass('pp2'); 

的解決方案是比較點擊的元素並具有被關閉的元素的ID

 <script type="text/javascript" > 
    $(document).ready(function(){ 
     $(document).on('click',function(e){ 
      if(e.target.nodeName == "H6") 
      { 
       var rootNode = e.target.parentElement.parentElement.getAttribute('id'); 
       var parentNode = e.target.parentElement.getAttribute('id'); 
       var childN = null; 
       var comp = null; 
       for(var i = 0;i<document.getElementById(rootNode).childElementCount;i++) 
       { 
        if($(document.getElementById(rootNode).children[i]).height()>25) 
        { 
         childN = $(document.getElementById(rootNode).children[i]).attr('class'); 
         comp = $(document.getElementById(rootNode).children[i]).attr('id'); 
         $(document.getElementById(rootNode).children[i]).removeClass('pp2'); 
         //$(document.getElementById(rootNode).children[i]).addClass('pp'); 
         break; 
        } 
       } 
       if($(document.getElementById(parentNode)).attr('id')!=comp) 
       { 
        $(document.getElementById(parentNode)).toggleClass('pp2'); 
       } 
      } 
     }); 
    }); 
</script> 
+0

讓我看看你的HTML。 –

+0

id1

Panel 1

id2

Panel 2

id3

Panel 3

id4

Panel 4

id5

Panel 5

0

您只需使用此代碼:

$('#main h6').click(function(e){ 
    if($(this).parent().hasClass('active')) { 
     $(this).parent().find('> .hid').slideUp().parent().removeClass('active'); 
    } else { 
     $(this).closest('div#main').find('.pp.active > .hid').slideUp().parent().removeClass('active'); 
     $(this).parent().addClass('active'); 
     $(this).parent().find('> .hid').slideDown(); 
    } 
}); 

和這個CSS也是:

.hid{display: none;}