jQuery效果：我哪里出错了？

Question

我已经在互联网上搜寻解决方案，但是我完全陷入了困境。 基本上，我想要三个大小和水平相等的按钮，以显示和隐藏三个不同的内容部分。

通过使用以CSS样式设置的span + h3 ，我使用inline-block在水平行中显示了按钮； 但是，当我添加了手风琴功能时，CSS破裂了，而且手风琴还是使它成为垂直堆栈。

1）我认为应该是盲目的效果而不是手风琴，对吗？ 谁能告诉我如何让它按我的意愿工作？

2）为什么收回手风琴后CSS还是坏了？ 我假设我在尝试将其切出或添加一些东西时试图将其正确放置，而这导致它停止了？

3）我还具有手风琴功能，因此在下次单击时它会自动关闭所有打开的内容。 我假设我在弄乱的同时也弄坏了它-但是我再也看不到我在做什么错。

HTML

标题1

    <section>
        <p>one</p>
     </section>
     <h5>Or</h5>
 <span class="button"><h3>title 2</h3></span>

 <section>
    <p>two</p>
 </section>
     <h5>Or</h5>
  <span class="button"><h3>title 3</h3></span>

<section>
      <p>three</p>
 </section>
 </div>

CSS

div#container span.block {
    display: inline-block;
    width:29%;
    background-color:red;
}
div#container span.block h3 {
    text-align: center;
}
div#container section {
    width: 100%;
}

JS

(function ($) {
    /* Initially hide all 'section' content */
    var allPanels = $('#container > section').hide();

    /* on block-btn/ h3 click - use slide toggle effect to hide/ show content */
    $('#container > span.button > h3').click(function () {
        $(this).parent().next().slideToggle()
            .siblings('.hide').slideUp();
         return false;
    });
    $('.close').click(function () {
        $('#container .hide').slideUp();
    });
 })(jQuery);

我的手风琴问题-http://jsfiddle.net/SparrowWoods/2fsagge1/

Answer 1

您对使用jQuery uis现成的手风琴感到满意： DEMO

<div id="accordion"> 
    <h3>title 1</h3>

    <section>
        <p>one</p>
    </section>

 <h3>title 2</h3>

    <section>
        <p>two</p>
    </section>

    <h3>title 3</h3>

    <section>
        <p>three</p>
    </section>
</div>

$(function() {
$( "#accordion" ).accordion();
});

Answer 2

您可以根据您的自身手风琴此试图东西的这个调：

(function ($) {
    /* Initially hide all 'section' content */
    /*var allPanels = $('#container > section').hide();

     on block-btn/ h3 click - use slide toggle effect to hide/ show content */
    /*$('#container > span.button > h3').click(function () {
        $(this).parent().next().slideToggle()
            .siblings('.hide').slideUp();
        return false;
    });
    $('.close').click(function () {
        $('#container .hide').slideUp();
    });*/

    $(".button").click(function(){
          $('.subDiv').slideUp("slow");
          $(this).next('.subDiv').slideDown("slow");
        });
})(jQuery);

在这里，您可以结合使用JQuery的slideUp和slideDown函数以及嵌套的<ul>和<li>或<div>标记以及JQuery UI库。

HTML：

<div id="container"> <span class="button"><h3>title 1</h3></span>
<div class="subDiv">
    <section>
        <p>one</p>
    </section>
    </div>
     <h5>Or</h5>
 <div class="button"><h3>title 2</h3></div>
<div class="subDiv">
    <section>
        <p>two</p>
    </section>
    </div>
     <h5>Or</h5>
 <div class="button"><h3>title 3</h3></div>
<div class="subDiv">
    <section>
        <p>three</p>
    </section>
    </div>
</div>

在Fiddle实现中尝试一下。