jQuery效果:我哪里出错了

jQuery effects: where am I going wrong?

本文关键字：出错 错了 效果 jQuery      更新时间：2023-09-26

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

我使用CSS样式的span + h3将按钮显示在使用内联块的水平行中；但是，当我添加手风琴函数时，CSS崩溃了，而且手风琴使它成为了一个垂直堆栈。

1） 我认为这应该是一种盲目的效果而不是手风琴，这是对的吗？有人能告诉我如何让它发挥我想要的作用吗？

2） 为什么在我把手风琴拿回来后，我的CSS还是坏了？我假设我在努力把它做好的同时删掉了一些东西或添加了一些东西，这导致了它停止了？

3） 我还让手风琴发挥作用，以便在下次点击时自动关闭任何打开的内容。我想我在捣乱的时候也打破了这个——但我又一次看不出我做错了什么。

HTML

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

您可以根据THIS制作自己的Accordion，方法如下：

(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实现中尝试一下。

您满足于使用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();
});
相关文章：