센터는 IE의 수평 아코디언 정렬 (동적 폭)
-
23-08-2019 - |
문제
Internet Explorer 6과 7에서 너비가없는 수평 아코디언을 중심으로하는 방법을 알아 내려고 노력하고 있습니다. 저는 XHTML 1.0 엄격한 작업을하고 있습니다. WebKit과 Mozilla에서는 단지 디스플레이 : 테이블. 나는 내가 생각할 수있는 모든 것을 시도했고, 하나는 나를 위해 나를 lmgtfy 할 수있는 모든 것을 시도했지만 ... 그것은 단지 작동하지 않습니다.
예제를 다음에 게시했습니다.http://abableobject.com/horaccordion.html
코드는 다음과 같습니다.
HTML :
<div id="container">
<div class='menuContainer'>
<a href="#">Top-level 1</a>
</div>
<div class='menuContainer'>
<a href="#">Top-level 2</a>
<div class='menu'>
<a href="#">Bottom Level A1</a>
<a href="#">Bottom Level A2</a>
<a href="#">Bottom Level A3</a>
<a href="#">Bottom Level A4</a>
</div>
</div>
<div class='menuContainer'>
<a href="#">Top-level 3</a>
<div class='menu'>
<a href="#">Bottom Level B1</a>
<a href="#">Bottom Level B2</a>
</div>
</div>
<div class='menuContainer'>
<a href="#">Top-level 4</a>
</div>
</div>
CSS :
#container {
margin: 0 auto 0 auto;
text-align: center;
display: table;
}
.menuContainer {
margin: 0;
padding: 0;
float: left;
height: 32px; /* For testing */
font-family: helvetica;
font-size: 18px;
clip: auto; overflow: hidden;
}
.menu {
height: 32px; /* For testing */
clip: auto; overflow: hidden;
float: left;
}
a, a:link, a:hover, a:visited, a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: 700;
float: left;
color: #222;
}
.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
color: black;
text-decoration: none;
padding: 12px;
font-weight: normal;
float: left;
}
jQuery/JavaScript :
if( jQuery.support.opacity == true ) {
$(".menuContainer a").hover(
function(){$(this).animate ({ opacity: 0.7 }, 200 );},
function(){$(this).animate ({ opacity: 1 }, 600 );}
);}
else {
$('.menuContainer a').hover(
function(){$(this).css('color', '#999');},
function(){$(this).css('color', '#000');}
);}
// Accordion Courtsey of Patrick @ StackOverflow : http://stackoverflow.com/users/113716/patrick
var $currentMenuContainer = $('#someFictionalElement');
var $previousMenuContainer = null;
// Iterate through each .menu element, setting the full width of each menu to a 'custom'
// attribute called 'fullWidth'. Since the full width should never change, this
// makes it easy to recall it quickly. You could use global variables instead.
// After setting 'fullWidth', it then collapses each menu and title.
$(".menu").each(function() {
var $theMenu = $(this);
var $theMenuContainer = $theMenu.parent();
$theMenu.attr({fullWidth: $theMenu.width()});
var menuContainerWidth = $theMenuContainer.width() - $theMenu.attr('fullWidth') + 3; // Add a few pixels for firefix
$theMenu.css({width: 0});
$theMenuContainer.css({width: menuContainerWidth});
});
$(".menuContainer a").click(
function() {
// Set the current and previous elements properly
$previousMenuContainer = $currentMenuContainer;
$currentMenuContainer = $(this).parent();
var $previousMenu = $previousMenuContainer.find('.menu');
var $currentMenu = $currentMenuContainer.find('.menu');
// Collapse the previous menu
$previousMenu.animate({ width: 0 }, {duration: 480, queue: false} );
// Subtract the width of the previous menuContainer's menu from the menuContainer (only if its menu is displayed)
if($previousMenu.width() > 0) $previousMenuContainer.animate({width: ('-=' + $previousMenu.attr('fullWidth'))}, 500);
// Expand the current menu and its menuContainer if it's not showing
if($currentMenu.width() == 0) {
// Increase the menuContainer width by the full width of its menu
$currentMenuContainer.animate({width: ('+=' + $currentMenu.attr('fullWidth'))}, 480);
// Increase the menuContainer to its full width
$currentMenu.animate({ width: $currentMenu.attr('fullWidth') }, 500);
}
});
});
해결책
<center>CONTENT</center>
Google에 충분하다면 충분히 좋을 것입니다. (론스하지 않는 한, 당신은 100% 표준 준수 사이트를 제공해야하며, 이는 경고를 제작할 수 없는지를 준수해야합니다)
제휴하지 않습니다 StackOverflow