[英]How to expand and collapse template accordion using javascript?
I have an accordion that I want to dynamically open and close with JavaScript/jQuery.我有一个手风琴,我想用 JavaScript/jQuery 动态打开和关闭它。 I am having trouble doing that.
我很难做到这一点。
<link href="https://bangi.africa/demo/css/plugins.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/style.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/custom.css" rel="stylesheet"> <script src="https://bangi.africa/demo/js/jquery.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/plugins.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/functions.js" type="text/javascript"></script> <<div class="body-inner"> <:-- Header --> <:-- Page Content --> <section id="page-content"> <div class="container"> <div class="row"> <div class="content col-lg-9"> <h4>Shadow</h4> <div class="toggle accordion accordion-shadow"> <div class="ac-item" id="test"> <h5 class="ac-title">Before you get started</h5> <div class="ac-content"> <p>test1</p> </div> </div> <div class="ac-item ac-active"> <h5 class="ac-title">Layout and design options</h5> <div class="ac-content"> <p>test2</p> </div> </div> <div class="ac-item"> <h5 class="ac-title">Compatibility with premium plugins</h5> <div class="ac-content"> <p>test3</p> </div> </div> </div> </div> </div> </div> </section> <:-- end: Page Content --> <!-- end: Footer --> </div> <!-- end: Body Inner -->
I have tried using something:我试过使用一些东西:
$("#test").addClass("ac-active");
or要么
$("#test").removeClass("ac-active");
But no luck, How can I expand and collapse the accordion/toggle using Javascript?但运气不好,我如何使用 Javascript 展开和折叠手风琴/切换? This is a template I am using called Polo ( https://inspirothemes.com/polo/index.html )
这是我正在使用的名为 Polo 的模板 ( https://inspirothemes.com/polo/index.html )
EDIT: Here's the issue, the demo isn't working on the embed.编辑:这是问题所在,演示在嵌入时不起作用。 Past the code into a html file and it will work.
将代码粘贴到 html 文件中,它将起作用。 I want to make ac-item
test
open and close with Javascript. How can I do that?我想用 Javascript 打开和关闭 ac-item
test
。我该怎么做?
If you want to make it using pure js and css you need to have a css file that says something like this如果你想使用纯 js 和 css 来制作它,你需要有一个 css 文件,上面写着这样的内容
CSS CSS
.accordion > div > h5{
display: block;
cursor: pointer;
width: 100%;
padding: 15px;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.accordion > div > div{
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
max-height: 0;
overflow: hidden;
transition: all 0.5s;
}
.accordion > div.active > div{ /* changed the class name from ac-active to active
display: block;
padding: 10px;
}
and in JS file在 JS 文件中
let accordion = document.querySelector('.accordion')
Array.from(accordion.children).forEach(wrapper=>{ // wrapper is ac-item in your case
wrapper.querySelector('h5').addEventListener('click', e=>{
wrapper.classList.toggle('active');
let divTag = wrapper.querySelector('div');
if (wrapper.classList.contains("active")) {
divTag.style.maxHeight = divTag.scrollHeight + 30 + 'px';
} else {
divTag.style.maxHeight = null;
}
Array.from(accordion.children).forEach(w=>{
if (w != wrapper) {
w.classList.remove('active');
w.querySelector('div').style.maxHeight = null;
}
});
});
});
Let me know if it worked for you让我知道它是否对你有用
Here is the solution for jQuery .这是jQuery的解决方案。 Make the dropdown text invisible by default by adding this to your css:
通过将此添加到您的 css,使下拉文本默认不可见:
.ac-content {
display: none;
}
$('.toggle.accordion.accordion-shadow.ac-item.ac-title').click(function(){ $(this).next('.ac-content').slideToggle(); $(this).closest('.ac-item').siblings().find('.ac-content').slideUp(); });
.ac-content { display: none; }
<link href="https://bangi.africa/demo/css/plugins.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/style.css" rel="stylesheet"> <link href="https://bangi.africa/demo/css/custom.css" rel="stylesheet"> <script src="https://bangi.africa/demo/js/jquery.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/plugins.js" type="text/javascript"></script> <script src="https://bangi.africa/demo/js/functions.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body-inner"> <section id="page-content"> <div class="container"> <div class="row"> <div class="content col-lg-9"> <h4>Shadow</h4> <div class="toggle accordion accordion-shadow"> <div class="ac-item" id="test"> <h5 class="ac-title">Before you get started</h5> <div class="ac-content"> <p>test1</p> </div> </div> <div class="ac-item ac-active"> <h5 class="ac-title">Layout and design options</h5> <div class="ac-content"> <p>test2</p> </div> </div> <div class="ac-item"> <h5 class="ac-title">Compatibility with premium plugins</h5> <div class="ac-content"> <p>test3</p> </div> </div> </div> </div> </div> </div> </section> </div>
To do this as the template does it, do this:要像模板那样执行此操作,请执行以下操作:
$('.ac-content').slideToggle();
$("#test").addClass("ac-active");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.