-1

我想在一个页面上显示 3 个 div（带有 JQuery click、slideUp 和 slideDown 函数的手风琴）

但我希望其中一个 div 在页面加载时“打开”。

这是我的代码，

$(document).ready(function() {

$('.title').click(function() {

$('.title').removeClass('on');

$('.content').slideUp('normal');

if($(this).next().is(':hidden') == true) {

$(this).addClass('on');

$(this).next().slideDown('normal');
}

});

});

css,


.title {
padding-left:15px;
height:17px;
background: url(images/arrow-toggle.png) 0 3px no-repeat !important;
cursor:pointer;
margin-bottom:10px;
color:#104675;

}

.on {
background: url(images/arrow-toggle.png) 0 -12px no-repeat !important;
}

.content {
display:none;
background-color:#f4f2f3;
border: #CCCCCC 1px solid;
padding: 10px;
margin-bottom:10px;
}

--------
HTML,

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/dropdownwitharrows.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="js/dropdownwitharrows.js" type="text/javascript"></script>
</head>

<body>

<div class="title"><h1>Header One</h1></div>
<div class="content"><p>content here..bla bla bla</p></div>
</body>
4

1 回答 1

0

Try

$(document).ready(function() {

    var $titles = $('.title'), $contents = $('.content');

    $titles.click(function() {
        var $acts = $titles.filter('.on').removeClass('on');
        $acts.next().finish().slideUp('normal');
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            $(this).next().finish().slideDown('normal');
        }
    }).first().click();

});

Demo: Fiddle

于 2013-08-08T08:35:30.220 回答