0
Когда вы нажимаете на элемент «Click me» в боковой навигационной части, ширина всей боковой полосы изменяется, если элементы дополнительной навигации более широки. Как изменить код, чтобы ширина не изменялась, так как я переключаю элементы верхнего уровня в боковой панели навигации?Как остановить переключение между изменением ширины боковой панели навигации?
http://plnkr.co/edit/CE11sXlVju7zFTlg2Kr1?p=preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css">
<style type="text/css" media="Screen">
.icon {
position: relative;
width:1em;
height:1em;
background-color:orange;
}
.icon-minus {
position: relative;
top:0;
left:0;
}
.icon-minus:after {
background-color: #fff;
width: 8px;
height: 2px;
position: absolute;
top:7px;
left: 3.5px;
z-index:4;
content:"";
}
.icon-plus {
position: relative;
top:0;
left:0;
}
.icon-plus:after {
background-color: #fff;
width: 8px;
height: 2px;
position: absolute;
top:7px;
left: 4px;
content:"";
}
.icon-plus:before {
background-color: #fff;
width: 2px;
height: 8px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top:4px;
left: 7px;
content:"";
}
#navigation ul {
list-style-type: none;
padding:0px;
/*border:1px solid orange*/
}
#navigation ul li{
border-top: 2px solid orange;
border-right: 1px solid orange;
border-bottom: 1px solid orange;
margin-bottom: 5px;
/* padding: 0;
margin: 0;
width: 140px; */
}
#navigation li {
border-right: 1px solid orange;
border-top: 2px solid orange
border;
}
#navigation li li {
border-top: 1px solid grey;
}
#navigation a {
text-decoration: none;
}
/*
#navigation a:active {
padding: 2px 13px 4px 7px;
background-color: #444;
color: #eee;
border: 1px solid #333;
}
#navigation li li a {
text-decoration: none;
padding: 3px 3px 3px 17px;
background-color: #999;
color: #111111;
}
#navigation li li a:active {
padding: 2px 4px 4px 16px;
background-color: #888;
color: #000;
} */
</style>
<script type="text/javascript">
function swap(targetId){
if (document.getElementById){
target = document.getElementById(targetId);
if (target.style.display == "none"){
target.style.display = "";
} else{
target.style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="navigation" style="float:left">
<ul>
<li>
<a href="#" onclick="swap('sectionOneLinks');return false;" class="filtersNav">Click me</a>
<ul id="sectionOneLinks" style="display: none;">
<li><a href="#">A link to a page aaaaaaaaaaaa</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li>
<a href="#" onclick="swap('sectionTwoLinks');return false;">Click me</a>
<span style="display:inline-block; float:right" class="icon icon-plus"></span>
<ul id="sectionTwoLinks" style="display: none;">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
<li>
<a href="#" onclick="swap('sectionThreeLinks');return false;">Click</a><span style="display:inline-block; float:right" class="icon icon-minus"></span>
<ul id="sectionThreeLinks" style="display: none;">
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
<li><a href="#">A link to a page</a></li>
</ul>
</li>
</ul>
</div>
<div style="float: left">
<ul class="navigation_primary">
<li><a href >M</a></li>
<li><a href >M</a></li>
<li><a href >M</a></li>
<li><a href >M</a></li>
</ul>
</div>
</body>
</html>
Что бы вы предпочли это делать вместо этого? Вы можете дать родительским divs минимальную ширину. Вы можете либо установить минимальную ширину на постоянный размер, либо задать ширину min-width для ширины самого широкого дочернего div. – nardnob
Дайте '# navigation' ширину. В вашем примере 'width: 100px' будет переносить элемент' aaaaaa' на новую строку. Если вы не хотите обертывания, установите ширину соответствующим образом. –
Не существует ли какой-либо родительский li, чтобы наследовать ширину дочерней ul, поскольку дочерний элемент ul уже присутствует и не добавляется динамически во время выполнения. –