jQuery選擇vs純javascript

我從w3cschool的例子中構建了一個手風琴菜單。該示例是用純javascript編寫的。我想重寫它在jQuery中，但它不起作用。這是原文：jQuery選擇vs純javascript

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     this.classList.toggle("active"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
}

，這是我的版本jQuery中：

$(".accordion").each(function (index) { 
    $(this).click(function() { 
     $(this).toggleClass("active"); 
     $(this).next().toggleClass("show"); 
    }); 
});

項目選中展開，但打開的項目不會關閉。我在jQuery中錯了什麼地方？

謝謝！

來源

2016-11-09 robyg72

只是一個提示，聲明變量一樣，是荒謬的。我個人將變量定義爲null，它們將它們糾正爲我希望它們與聲明分離的位置，但在您的情況下，我只會執行''var acc = document.getElementsById（'accordion'），i = null;'' 。 – Crowes

@JoshCrowe你從哪裏得到這個想法？ 'var i;'完全有效並將'i'初始化爲'undefined'。 – Boldewyn

@JoshCrowe請不要給錯誤的提示。 –

您需要從其他手風琴中刪除課程。

$(".accordion").click(function() {  
    var self = $(this); 

    //get other accordions 
    var otherAccordion = $(".accordion").not(self); 
    //remove classes 
    otherAccordion.removeClass("active"); 
    otherAccordion.next().removeClass("show");  

    //toggle classes 
    self.toggleClass("active"); 
    self.next().toggleClass("show"); 
});

而且沒有將事件綁定

來源

2016-11-09 08:18:12 Satpal

非常感謝！爲什麼純JavaScript更緊湊？ – robyg72

爲什麼我不需要.each（）方法？ $（「。accordion」）循環到找到的所有元素？ – robyg72

@ robyg72，_我爲什麼不需要.each（）方法？_ jQuery在內部爲你做。 – Satpal

無需在每次的（For循環）

第一種方式

(function() { 
 

 
$(".accordion").click(function (index) { 
 
    $(this).next().slideDown(); 
 
    $(this).siblings(".accordion").next().slideUp(); \t 
 
}); 
 

 
})();

button.accordion { 
 
background-color: #eee; 
 
color: #444; 
 
cursor: pointer; 
 
padding: 18px; 
 
width: 100%; 
 
border: none; 
 
text-align: left; 
 
outline: none; 
 
font-size: 15px; 
 
transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
background-color: #ddd; 
 
} 
 

 
div.panel { 
 
padding: 0 18px; 
 
display: none; 
 
background-color: white; 
 
} 
 

 
div.panel.show { 
 
display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Accordion</h2> 
 

 
<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div>

需要

第二種方式

$(".accordion").click(function (index) { 
 
if($(this).hasClass("active")) { 
 
$(this).removeClass("active"); 
 
$(this).next().slideUp(); 
 
\t } 
 
\t else { 
 
\t $(this).addClass("active"); 
 
    $(this).next().slideDown(); 
 
\t } 
 
\t $(this).siblings(".accordion").removeClass("active"); 
 
\t $(this).siblings(".accordion").next().slideUp(); \t 
 
});

button.accordion { 
 
background-color: #eee; 
 
color: #444; 
 
cursor: pointer; 
 
padding: 18px; 
 
width: 100%; 
 
border: none; 
 
text-align: left; 
 
outline: none; 
 
font-size: 15px; 
 
transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
background-color: #ddd; 
 
} 
 

 
div.panel { 
 
padding: 0 18px; 
 
display: none; 
 
background-color: white; 
 
} 
 

 
div.panel.show { 
 
display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Accordion</h2> 
 

 
<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div>

來源

2016-11-09 08:26:19

jQuery選擇vs純javascript

回答

相關問題