制作自定义手风琴jQuery [英] Making a Custom accordion jQuery

问题描述

我正在制作定制的手风琴.我的问题是，一旦我单击另一个标头上没有div的slideDown，我不知道如何slideUp就是slideDown的div.

I am making a custom accordion. My problem is I don't know how to slideUp the div that is being slideDown once I click on the other header with there div is not yet being slideDown.

这是我的代码:

CSS:

.grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; }
.header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; }
.level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; }
.box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; }

HTML:

<div class="grid-l1">
    <div class="box-a1">
        <h2 class="header">
          Header
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 2
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 3
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
</div>

JS:

$('body').on('click', '.header', function() {
    $(this).closest('.box-a1').find('.level-box').slideToggle();
});

我应该使用slideToggle吗?我会很感激你们会做出的每一个回应.随时教我，我仍然是jQuery世界的新手:)非常感谢先生.

Should I use slideToggle ? I will appreciate every responds you guys will be making. And feel free to teach me, I'm still a newbie in jQuery world :) Thanks a lot Sir.

推荐答案

尝试一下

$('body').on('click', '.header', function(e) {
    $('.box-a1').find('.level-box').stop().slideUp();
    $(this).closest('.box-a1').find('.level-box').stop().slideToggle();
});

.grid-l1{ width: 500px; height: auto; min-height: 500px; overflow: hidden; padding: 10px; background: #000; }
.header{ width: 100%; text-align: left; background: #fff; color: #000; font-size: 14px; text-transform: uppercase; font-weight: bold; padding: 5px; cursor: pointer; margin: 0px !important; }
.level-box{ width: 100%; height: auto; overflow: hidden; background: #ededed; padding: 10px; display: none; }
.box-a1{ width: 100%; height: auto; overflow: hidden; margin: 5px 0px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grid-l1">
    <div class="box-a1">
        <h2 class="header">
          Header
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 2
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
    <div class="box-a1">
        <h2 class="header">
          Header 3
        </h2>   

        <div class="level-box">
          <label>Test Input</label>
          <input type="text">
        </div>
    </div> <!-- box-a1 -->
</div>

这篇关于制作自定义手风琴jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！