如何从隐藏的div打开手风琴

Question

我似乎无法解决这个问题。

我试图为响应式网站制作口琴。这就是我现在所拥有的。

<div class="fake"></div>
<div class="panel-section" id="panel-section-services">
    <div class="panel-header">
         <h1 class="text-uppercase">Diensten</h1>
         <span class="border"></span>
    </div>
    <div class="panel-body">
        <p>Body comes here<p>
    </div>
</div>

<div class="fake"></div>
<div class="panel-section" id="panel-section-vacature">
    <div class="panel-header">
         <h1 class="text-uppercase">Vacatures</h1>
        <span class="border"></span>
    </div>
    <div class="panel-body">
        <p>Body comes here<p>
    </div>
</div>

<div class="fake"></div>
<div class="panel-section" id="panel-section-contact">
    <div class="panel-header">
         <h1 class="text-uppercase">Contacteer ons</h1>
         <span class="border"></span>
    </div>
    <div class="panel-body">
        <p>Body comes here<p>
    </div>
</div>

当＆＃34;假＆＃34;单击按钮（与＆＃34; head＆＃34;重叠），当前容器的主体需要打开，其余部分需要关闭。就像普通口琴一样。

问题是，我似乎无法访问我需要的元素。

$(document).ready(function () {
     $('.panel-body').hide();  
});

$('.fake').click(function () {
     $('.panel-body').hide();  
    var header = $(this).find('.panel-header').first()   ;
    var element = $(header).next('.panel-body');

    if (element.is(':visible')) {
        element.slideUp();
    } else {
        $('.panel-body').slideUp()(element.slideDown());
    }
});

http://jsfiddle.net/hchpus01/1/

Answer 1

您正在以错误的方式获取元素：

$(document).ready(function () {
 $('.panel-body').hide();  
});

$('div.fake').click(function () {
 var element = $(this).next().find('.panel-body');
 if (element.is(':visible')) {
    element.slideUp();
 } 
 else 
 {
    $('.panel-body').slideUp();
    element.slideDown();
 }
});

工作小提琴：http://jsfiddle.net/robertrozas/hchpus01/3/