如何使用javascript扩展和折叠模板手风琴?

Question

我有一个手风琴，我想动态地打开和关闭JavaScript/jQuery。我做那件事有困难。

<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 -->

我试着用了一些东西:

$("#test").addClass("ac-active");

或

$("#test").removeClass("ac-active");

但是没有运气，我如何使用Javascript展开和折叠手风琴/切换?这是我使用的一个名为Polo (https://inspirothemes.com/polo/index.html)的模板

编辑:这里的问题，演示是不工作的嵌入。过去的代码到一个html文件，它将工作。我想用Javascript打开和关闭ac-item test。我该怎么做呢?

Answer 1

如果你想使用纯js和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;
}

和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;
      }
    });
  });
});

让我知道它是否适用于你

Answer 2

jQuery的解决方案。默认情况下，将下拉文本添加到你的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>

Answer 3

要像模板那样做，请执行以下操作:

$('.ac-content').slideToggle();
$("#test").addClass("ac-active");