如何停止切换侧导航栏的宽度？

时间：2015-12-01 17:21:13

标签： javascript html css

当您点击该项目时，请点击我＆＃39;在侧导航项中，如果子导航项的大小较宽，则整个侧栏宽度会发生变化。如何修改代码以确保宽度不变，就像我在侧面导航栏中切换顶级项目一样？

http://plnkr.co/edit/CE11sXlVju7zFTlg2Kr1?p=preview

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您只需要为主ul添加固定宽度即可。有点像这样：

#navigation ul {
  list-style-type: none;
  padding: 0px;
  width:80px;      /*Just add this property. This is an example*/
}

见下文：

function swap(targetId) {
    if (document.getElementById) {
      target = document.getElementById(targetId);
      if (target.style.display == "none") {
        target.style.display = "";
      } else {
        target.style.display = "none";
      }

    }
  }
.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;
  width:80px;      /*Just add this property*/
}

#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;
}
<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 aaaaaaaaaa</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>

相关问题
最新问题