Question

我有一个有5种不同颜色的jquery手风琴，请参阅链接http://www.photorestorationexpert.co.uk/testFolder/indexCb1Accordian.html。需要解释为什么它不起作用，因为我不知道为什么。当我单击欢迎切片时，它似乎没有向下滑动显示内容这是jquery代码：

$(document).ready(function() {
   $('#va-accordion .va-content').hide();
   $('.va-slice').click(function(){
           $('#va-accordion .va-content').slideUp();
           $(this).parent().next().slideDown();
           return false;
   });

}）;

这是上面代码的html：

<div id="va-accordion">     
<div class="va-slice va-slice-1">
<h2 class="va-heading">Welcome</h2>
<div class="va-content">Nam facilisis convallis elit ac.</div>  
</div>

<div class="va-slice va-slice-2">
<h2 class="va-heading">About</h2>
<div class="va-content"></div>  
</div>

<div class="va-slice va-slice-3">
<h2 class="va-heading">What To Expect</h2>
<div class="va-content"></div>  
</div>

<div class="va-slice va-slice-4">
<h2 class="va-heading">Prices</h2>
<div class="va-content"></div>  
</div>

<div class="va-slice va-slice-5">
<h2 class="va-heading">Contact</h2>
<div class="va-content"></div>  
</div>

Answer 1

我不知道您使用此代码的确切目的，但我可能建议您使用jQuery UI吗？

请在此处查看http://jqueryui.com/。

有一个内置的手风琴小部件，需要3秒钟才能设置： http://jqueryui.com/demos/accordion/

<script>
$(function() {
    $( "#accordion" ).accordion();
});
</script>

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.   </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.   </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.          </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus inceptos os.
    </div>
</div>

像魅力一样工作。如果您认为这没有帮助，请随时告诉我，我们可以检查您的代码。干杯！

如果您仍希望使用自定义代码，那么这是正确的代码：

$(document).ready(function() {
   $('#va-accordion .va-content').hide();
   $('.va-heading').click(function(){
           $('#va-accordion .va-content').slideUp();
           $(this).next().slideDown();
           return false;
   });
});

（您将click事件绑定到手风琴中的整个部分，即标题+内容当你向下滑动时，这是一个完整的'va-slice'，它已经显示，因为你只隐藏了'va-content'。 jQuery很混乱，因为滑动函数就像toggle（）一样，如果目标DOM对象的任何部分已经可见，则默认为'true'。

祝你好运！

Answer 2

我刚注意到你错过了关闭整个手风琴div的最终div标签

...
    <div class="va-slice va-slice-5">
         <h2 class="va-heading">Contact</h2>
    <div class="va-content"></div>  
</div>
</div> // <-- need one more to close the whole accordian out

Answer 3

当您使用“slideDown”时，您正在父母的下一个项目上执行此操作，即“va-accordion”DIV之后的下一个标记。

PS。为什么你隐藏“＃va-accordion .va-content”，每次点击后你还会滑动它？

Answer 4

看看jquery ui＆amp;起初发现它有点令人困惑，但我想我需要进一步研究它，但暂时会使用我发布的代码。我想我理解你的解释，你说我将click事件绑定到我不应该拥有的整个部分（va-slice）。在va-slice中我有标题＆amp;内容与我应该只隐藏内容＆amp;不是整个部分（va-slice）。我可以在.click中放入va-slice-1，va-slice-2，va-slice-3，va-slice-4，va-slice-5（例如

$('.va-slice-1').click(function()

如果不是wny，是因为它是'va-slice'的一部分

我还指出，在'va-slice'的CSS中我应该取出高度，因为它没有显示所有内容

va-slice{
cursor:pointer;
margin:0 auto;
width:725px;
overflow:hidden;
    height:50px;
}

还有一件事，当你点击标题＆amp;它向下滑动，见http://www.photorestorationexpert.co.uk/testFolder/indexCb1Accordian.html

简单的jquery手风琴代码不起作用

4 个答案: