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

回答

相关问题