Question

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

我使用带有CSS样式的span + h3按钮，使用内联块显示在水平行中;但是，当我添加手风琴功能时，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 readymade accordion：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

你可以根据THIS制作自己的手风琴，尝试一下这个：

(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 Library结合使用。

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>

在你的小提琴实现中试试。

jQuery效果：我哪里错了？

标题1

2 个答案: