【发布时间】：2014-01-04 02:32:16
【问题描述】：
我正在使用自定义手风琴脚本，我遇到的问题是，在调整浏览器大小时，它会格式化其中一个部分的内容。我希望内容保持不变，并且如果您想查看内容，滚动条会很小心。在我的演示中，您将在第 3 部分看到问题。
我尝试做溢出：隐藏，但如果我在 ui 内容上做它会消除滚动条。我也做了 p 上隐藏的溢出，但仍然没有按我的意愿工作。提前致谢。
这里是my Demo
这是 HTML 代码：
<head>
<meta charset="utf-8">
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="file_wrapper">
<div class="file_inner">
<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
</span></div>
<h3><a href="#">Section 2</a></h3><div>
<span class="minus"><p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
</span></div>
<h3><a href="#">Section 3</a></h3><div>
<p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p> </p>
<p>################################################################################</p>
<p># Test 1. GOOD *** Check up/up state for all interfaces excluding tunnel #</p>
<p># Test 2. GOOD *** BGP neighbor not active #</p>
<p># Test 3. GOOD *** BGP adv and routes check #</p>
<p># Test 4. GOOD *** Show IP OSPF Neighbor #</p>
<p># Test 5. GOOD *** GLBP tested correctly #</p>
<p># Test 6. GOOD *** Verify WCCP is running correctly #</p>
<p># Test 7. GOOD *** All pings were succesful #</p>
<p># Test 8. GOOD *** Environmental status #</p>
<p>################################################################################</p>
</div> </div>
</div>
</div>
<div class="file_wrapper">
<div class="file_inner">
<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<span class="diff"><p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
</span></div>
<h3><a href="#">Section 2</a></h3><div>
<p>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p></p>
<p>##############################################################################</p>
<p># Test 1. </p>
<p># Test 2. </p>
<p># Test 3. </p>
<p># Test 4. </p>
<p># Test 5. </p>
<p>##############################################################################</p>
</div>
<h3><a href="#">Section 3</a></h3><div>
<p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p>
<p> </p>
<p>################################################################################</p>
<p># Test 1. GOOD *** Check up/up state for all interfaces excluding tunnel #</p>
<p># Test 2. GOOD *** BGP neighbor not active #</p>
<p># Test 3. GOOD *** BGP adv and routes check #</p>
<p># Test 4. GOOD *** Show IP OSPF Neighbor #</p>
<p># Test 5. GOOD *** GLBP tested correctly #</p>
<p># Test 6. GOOD *** Verify WCCP is running correctly #</p>
<p># Test 7. GOOD *** All pings were succesful #</p>
<p># Test 8. GOOD *** Environmental status #</p>
<p>################################################################################</p>
</div>
</div>
</body>
这是我的 jQuery：
/* $(function() {
$( ".accordion" ).accordion();
//$( "#accordion2" ).accordion();
});
*/
$(document).ready(function(){
var $accordions = $('.file_inner');
function accordion_expand_all()
{
var sections = $accordions.find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
$(section).click();
}
});
}
/*
function accordion_collapse_all()
{
var sections = $accordions.find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-active')) {
$(section).click();
}
});
}
*/
$('.file_inner').accordion({
active: true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp('fast'); } else { currContent.slideDown('fast'); }
var $this = $(this);
if (!$this.hasClass('programatic')) {
var active = $this.children('.ui-accordion-content').index(ui.newPanel);
var $otherAccordions = $accordions.not($(this));
$otherAccordions.addClass('programatic');
$otherAccordions.accordion('option', 'active', active);
$otherAccordions.removeClass('programatic');
}
return false; // Cancels the default action
}
});
accordion_expand_all()
})
【问题讨论】：
标签： javascript jquery html css jquery-ui