Question

我正在使用JQuery和JQuery UI构建一个基于手风琴的小型Web应用程序。我已经弄清楚了手风琴逻辑，但是我在获得想要的结果时遇到了一些麻烦。我希望所有选项卡在单击时都会折叠，但我不知道该怎么做。

谷歌没有帮助我，在连续下来的选民们抓住我之前。在这里找不到任何东西。

这是我的HTML：

<button class="accordion">About</button>
        <div class="panel">
            <p>Blah 1</p>
        </div>
        <button class="accordion">Contact</button>
        <div class="panel">
            <form>
                <label>Full Name</label>
                <input type="text" />
                <label>E-mail Address</label>
                <input type="email" />
            </form>
        </div>

我的CSS：

button.accordion {
    background-color: #336699;
    background: linear-gradient(-90deg, #fff, #336699, #fff);
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion:not(:last-child) {
    margin-bottom: 10px;
}

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

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6 ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}

div.column {
    float: left;
    width: 300px;
}

最后，我的JQuery：

$(function() {
    $('.accordion').on('click', function() {
        // Something here, maybe?
        $(this).toggleClass('active', 400);
        $(this).next().toggleClass('show', 400);
    });
});

当我尝试在回调中放入一些内容来关闭所有这些内容时，它最终会立即执行并且标签根本不会打开。有人可以帮我解释一下到底发生了什么吗？

Answer 1

要达到预期效果，请使用以下

$(function() {
  $('.accordion').on('click', function() {

    var x = $('.accordion').hasClass('active');
    if (x) {
      $('.active').removeClass('active');
      $('div').removeClass('show');
      $(this).toggleClass('active', 400);
      $(this).next().toggleClass('show', 400);
    } else {
      console.log("x");
      $(this).toggleClass('active', 400);
      $(this).next().toggleClass('show', 400);
    }
  });
});

http://codepen.io/nagasai/pen/grvNGZ

Answer 2

$(function() {
    $('.accordion').on('click', function() {
        var panel = $(this).next()[0];
        $('.accordion').not($(this)).removeClass('active');
        $('.panel').not(panel).removeClass('show');
        $(this).toggleClass('active');
        $(panel).toggleClass("show");
    });
});

button.accordion {
    background-color: #336699;
    background: linear-gradient(-90deg, #fff, #336699, #fff);
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion:not(:last-child) {
    margin-bottom: 10px;
}

button.accordion.active,
button.accordion:hover {
    background: #555;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6 ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}

div.column {
    float: left;
    width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">About</button>
<div class="panel">
  <p>Blah 1</p>
</div>
<button class="accordion">Contact</button>
<div class="panel">
  <form>
    <label>Full Name</label>
    <input type="text" />
    <label>E-mail Address</label>
    <input type="email" />
  </form>
</div>

你可以试试这个。

在打开另一个之前切换所有手风琴标签（一次只打开一个）

2 个答案: