在可扩展手风琴中显示<div> </div> - 不显示<div> </div>中的内容

时间:2014-08-18 10:59:53

标签: javascript jquery html css

我有一支不断扩大的手风琴。但是当在区域内添加一个div时,div不显示,但只显示为空白?有任何想法吗?感谢。

如何在内部显示div以显示其内容?

代码:http://jsfiddle.net/6xnt3p8j/1/

的JavaScript

        $(document).ready(function(){
        $(".accordion2 h3").eq(40).addClass("active");
        $(".accordion2 p").eq(40).show();
        $(".accordion2 h3").click(function(){
        var video = $(".accordion2 h3.active").next().children();
        var src = video.attr("src");
        video.attr("src","");
        video.attr("src",src);

        $(this).next("div").slideToggle("slow")
        .siblings("div:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

CSS

body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}

.box {
  display:inline-block;
  padding: 3px;
  margin: 3px auto;
}

.accordion2 {
     min-height:95px;
     height:auto !important;
     height:95px;

}

.accordion2 h3 {
    padding-bottom: 1px;
    margin: 0;
    border-bottom: none;
    cursor: pointer;
    min-height:95px;
    height:auto !important;
    border:1px solid blue;
}
.accordion2 h3:hover {
    background-color: #e3e2e2;
}
.accordion2 h3.active {
    background-position: right 5px;
}
.accordion2 div {
/*    background: red;
*/    margin: 0;
    display: none;
}

HTML

<div class="accordion2">

    <h3>
        <div class="box"><img src='http://img.youtube.com/vi/tPgf_btTFlc'>
        </div>
    </h3>
    <div>text text text text text text text text</div>

    <h3>title</h3>
    <div>text text text text text text text text</div>

    <h3>title</h3>
    <div>text text text text text text text text</div>



</div>

感谢百万/ M

1 个答案:

答案 0 :(得分:0)

在css中删除 display:none;

这是你的css文件

body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}

.box {
  display:inline-block;
  padding: 3px;
  margin: 3px auto;
}

.accordion2 {
     min-height:95px;
     height:auto !important;
     height:95px;

}

.accordion2 h3 {
    padding-bottom: 1px;
    margin: 0;
    border-bottom: none;
    cursor: pointer;
    min-height:95px;
    height:auto !important;
    border:1px solid blue;
}
.accordion2 h3:hover {
    background-color: #e3e2e2;
}
.accordion2 h3.active {
    background-position: right 5px;
}
.accordion2 div {
/*    background: red;
*/    margin: 0;

}