繁体   English   中英

jQuery Vallenato手风琴

[英]jQuery Vallenato Accordion

我只是在学习一些有关jQuery的知识,并且遇到了以下手风琴脚本:

$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');

//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });

//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-    header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
    $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
    $(this).toggleClass('active-header').toggleClass('inactive-header');
    $(this).next().slideToggle().toggleClass('open-content');
}

else {
    $(this).toggleClass('active-header').toggleClass('inactive-header');
    $(this).next().slideToggle().toggleClass('open-content');
}
});

return false;
});

我真的很喜欢这个版本的jQuery手风琴,但是我想添加一个功能,以便手风琴的高度只有这么大,然后内容才会有滚动条。 jQuery UI网站上有一个示例,但是它们的脚本有很大不同。 有人可以帮忙吗?

最好的自定义方式是使用CSS,您可以轻松找到增加高度和删除滚动按钮的参考。 尝试www.w3schools.com

您是否尝试不给.accordian-content高度,而是给它一个“最大高度:...”,然后使“溢出:滚动”?

例如,尝试更改

$('.accordion-content').css({'width' : contentwidth });

$('.accordian-content').css({'width' : contentwidth, 'max-height' : '...', 'overflow' : 'scroll'});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM