嵌套ul移动父级ul到子li元素的深度

时间：2017-08-22 23:00:03

标签： javascript jquery html css

我想知道如何让我的父母或<ul class="main-ul">保持不动。我意识到这与我的定位有关，或者至少我认为，但我不确定它是什么或为什么。目前，当在每个项目下展开子<ul>时，整个父<li>都会跟随。

$(document).ready(function() {
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});
.home-main-nav-menu {
  border-style: double;
  border-color: cyan;
}
.main-li-items {
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  border-style: double;
  border-color: purple;
}
.sub-li-items {
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
  border-style: double;
  border-color: yellow;
}
.main-li-items > ul {
  display: none;
}
.main-ul {
  border-style: double;
  border-color: green;
  margin-left: -3px
}
ul {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>  
<nav class = "home-main-nav-menu">
  <ul class="main-ul">
    <li class="main-li-items"><a href="#/">Home</a></li>
      <li class="main-li-items"><a href="#/">About Me</a>
        <ul>
          <li class="sub-li-items"><a href="#/">Education</a></li>
          <li class="sub-li-items"><a href="#/">Lessons</a></li>
        </ul>
      </li>
      <li class="main-li-items"><a href="#/">Blog</a></li>
      <li class="main-li-items"><a href="#/">Contact</a>
      <ul>
        <li class="sub-li-items"><a href="#/">Email</a></li>
        <li class="sub-li-items"><a href="#/">Phone</a></li>
      </ul>
    </li>
      <li class="main-li-items"><a href="#/">Portfolio</a>
      <ul>
        <li class ="sub-li-items"><a href="#/">Recent</a></li>
        <li class="sub-li-items"><a href="#/">All</a></li>
      </ul>
     </li>
     <li class = "main-li-items"><a href="#/">Collaborate</a>
      <ul>
        <li class="sub-li-items"><a href="#/">Now</a></li>
        <li class="sub-li-items"><a href="#/">Later</a></li>
      </ul>
    </li>
  </ul>
</nav>

3 个答案:

答案 0 :(得分：0)

如果您向vertical-align: top添加main-li-items，那么弃牌将会降低，而不会降低。

$(document).ready(function() {
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});
.home-main-nav-menu {
  border-style: double;
  border-color: cyan;
}
.main-li-items {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  border-style: double;
  border-color: purple;
}
.sub-li-items {
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
  border-style: double;
  border-color: yellow;
}
.main-li-items > ul {
  display: none;
}
.main-ul {
  border-style: double;
  border-color: green;
  margin-left: -3px
}
ul {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>  
<nav class = "home-main-nav-menu">
  <ul class="main-ul">
    <li class="main-li-items"><a href="#/">Home</a></li>
      <li class="main-li-items"><a href="#/">About Me</a>
        <ul>
          <li class="sub-li-items"><a href="#/">Education</a></li>
          <li class="sub-li-items"><a href="#/">Lessons</a></li>
        </ul>
      </li>
      <li class="main-li-items"><a href="#/">Blog</a></li>
      <li class="main-li-items"><a href="#/">Contact</a>
      <ul>
        <li class="sub-li-items"><a href="#/">Email</a></li>
        <li class="sub-li-items"><a href="#/">Phone</a></li>
      </ul>
    </li>
      <li class="main-li-items"><a href="#/">Portfolio</a>
      <ul>
        <li class ="sub-li-items"><a href="#/">Recent</a></li>
        <li class="sub-li-items"><a href="#/">All</a></li>
      </ul>
     </li>
     <li class = "main-li-items"><a href="#/">Collaborate</a>
      <ul>
        <li class="sub-li-items"><a href="#/">Now</a></li>
        <li class="sub-li-items"><a href="#/">Later</a></li>
      </ul>
    </li>
  </ul>
</nav>

答案 1 :(得分：0)

您可以定位子菜单absolute，使其不在流量范围内。

$(document).ready(function(){
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});
.home-main-nav-menu{
  border-style: double;
  border-color: cyan;
}
.main-li-items{
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  border-style: double;
  border-color: purple;
}
.sub-li-items{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
  border-style: double;
  border-color: yellow;
}
.main-li-items > ul {
  position: absolute;
  display: none;
}
.main-ul{
  border-style: double;
  border-color: green;
  margin-left: -3px
}
ul{
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>  
  <nav class = "home-main-nav-menu">
    <ul class = "main-ul">
      <li class = "main-li-items"><a href = "#/">Home</a></li>
      <li class = "main-li-items"><a href = "#/">About Me</a>
        <ul>
          <li class = "sub-li-items"><a href = "#/">Education</a></li>
          <li class = "sub-li-items"><a href = "#/">Lessons</a></li>
        </ul>
      </li>
      <li class = "main-li-items"><a href = "#/">Blog</a></li>
      <li class = "main-li-items"><a href = "#/">Contact</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Email</a></li>
        <li class = "sub-li-items"><a href = "#/">Phone</a></li>
      </ul>
    </li>
      <li class = "main-li-items"><a href = "#/">Portfolio</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Recent</a></li>
        <li class = "sub-li-items"><a href = "#/">All</a></li>
      </ul>
     </li>
      <li class = "main-li-items"><a href = "#/">Collaborate</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Now</a></li>
        <li class = "sub-li-items"><a href = "#/">Later</a></li>
      </ul>
      </li>
    </ul>
</nav>

答案 2 :(得分：0)

这是你想要的吗？

只改变：

.main-li-items {
  ...
  vertical-align: top;
}


$(document).ready(function() {
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});
.home-main-nav-menu {
  border-style: double;
  border-color: cyan;
}
.main-li-items {
  display: inline-block;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  border-style: double;
  border-color: purple;
  vertical-align: top;
}
.sub-li-items {
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
  border-style: double;
  border-color: yellow;
}
.main-li-items > ul {
  display: none;
}
.main-ul {
  border-style: double;
  border-color: green;
  margin-left: -3px
}
ul {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>  
<nav class = "home-main-nav-menu">
  <ul class="main-ul">
    <li class="main-li-items"><a href="#/">Home</a></li>
      <li class="main-li-items"><a href="#/">About Me</a>
        <ul>
          <li class="sub-li-items"><a href="#/">Education</a></li>
          <li class="sub-li-items"><a href="#/">Lessons</a></li>
        </ul>
      </li>
      <li class="main-li-items"><a href="#/">Blog</a></li>
      <li class="main-li-items"><a href="#/">Contact</a>
      <ul>
        <li class="sub-li-items"><a href="#/">Email</a></li>
        <li class="sub-li-items"><a href="#/">Phone</a></li>
      </ul>
    </li>
      <li class="main-li-items"><a href="#/">Portfolio</a>
      <ul>
        <li class ="sub-li-items"><a href="#/">Recent</a></li>
        <li class="sub-li-items"><a href="#/">All</a></li>
      </ul>
     </li>
     <li class = "main-li-items"><a href="#/">Collaborate</a>
      <ul>
        <li class="sub-li-items"><a href="#/">Now</a></li>
        <li class="sub-li-items"><a href="#/">Later</a></li>
      </ul>
    </li>
  </ul>
</nav>

相关问题
最新问题