根据子菜单的高度动态增加下拉高度？

时间：2017-09-01 07:52:43

标签： jquery html css drop-down-menu

原始

Original

所需

enter image description here

Depth-level-1（Menu-item-1.x）定位为relative，Depth-level-2,3 ..菜单定位为absolute。

如果depth-level-2-menu列表项超过depth-level-1，则depth-level-1应根据depth-level-2扩展其高度。

$(document).ready(function() {

  /*Depth-0
  ===========*/

  $('.afs-menu-item').click(function() {
    $('.afs-col ul li').removeClass('active'); //Closing Depth-1
    if ($(this).closest("li.afs-menu-item").children(".afs-dropdown").length) {
      $('.afs-dropdown').slideToggle('fast');
    } else {
      var url = $(this).closest("li.menu-item").attr('href');
      window.open(url, "_self");
    }
    return false;
  });


  /*Depth-1
  ===========*/

  $('.afs-col ul li').click(function(event) {
    event.stopPropagation();
    $('.afs-sub-col ul li').removeClass('active'); //Closing Depth-2
    var depth1 = $(this);
    depth1.siblings().removeClass('active');
    if (depth1.hasClass('active')) {
      depth1.removeClass('active');

    } else {
      depth1.addClass('active');

    }

  });


  /*  Depth-2
  ==============*/

  $('.afs-sub-col  ul  li').click(function(event) {
    event.preventDefault();
    $(this).addClass('active');
    var depth2 = $(this);
    depth2.siblings().removeClass('active');
    if (depth2.hasClass('active')) {
      depth2.removeClass('active');
    } else {
      depth2.addClass('active');
    }

  });

  /*Depth-3
  =============*/

  $('.afs-sub-sub-col > ul > li').click(function(event) {
    var depth3 = $(this);
    depth3.siblings().removeClass('active');
    if (depth3.hasClass('active')) {
      depth3.removeClass('active');
    } else {
      depth3.addClass('active');
    }
  });

}); // Jquery Document Close
body {
  font-family: 'Mada', sans-serif;
  font-weight: 600;
  line-height: 1;
}

ol,
ul {
  list-style: none;
}


/*Container
===============*/

.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.inner {
  position: relative;
  width: 1500px;
  margin: 0 auto;
}

.afs-menu {
  text-decoration: none;
  text-align: center;
}

.afs-menu li a {
  text-decoration: none;
  font-size: 23px;
  color: #00A0F0;
  transition: all 0.3s linear;
}

.afs-dropdown li a {
  text-decoration: none;
  font-size: 18px;
  color: #00A0F0;
  transition: all 0.3s linear;
}

li a:hover {
  color: #000;
}

.afs-menu>li {
  display: inline-block;
  padding: 15px 20px;
}

.afs-dropdown {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  text-align: left;
  display: none;
  background-color: #888;
}

.afs-dropdown>.afs-col {
  display: block;
}

.afs-col {
  position: relative;
  top: 0;
  display: block;
  width: 33%;
  background-color: transparent;
  z-index: 99;
}

.afs-col>ul>li {
  padding: 20px 0px;
  border-bottom: 1px dotted #ccc;
}

.afs-sub-col>ul>li {
  padding: 20px 0px;
  border-bottom: 1px dotted #ccc;
}

.afs-sub-sub-col>ul>li {
  padding: 20px 0px;
  border-bottom: 1px dotted #ccc;
}

.afs-sub-sub-sub-col>ul>li {
  padding: 20px 0px;
  border-bottom: 1px dotted #ccc;
}

.afs-sub-col {
  position: absolute;
  left: 510px;
  top: 0;
  /*display: none;*/
  opacity: 0;
  width: 100%;
  transition: width 300ms, opacity 300ms;
}

.afs-sub-sub-col {
  position: absolute;
  left: 510px;
  top: 0;
  opacity: 0;
  transition: width 300ms, opacity 300ms;
  width: 100%;
}

.afs-sub-sub-sub-col {
  position: absolute;
  left: 510px;
  top: 0;
  display: none;
  width: 100%;
}

.active .afs-col {
  display: block;
}

.afs-col .active .afs-sub-col {
  /*display: block;*/
  opacity: 1;
}

.afs-col .afs-sub-col li.active .afs-sub-sub-col {
  opacity: 1;
}

.afs-col .afs-sub-col .afs-sub-sub-col .active .afs-sub-sub-sub-col {
  display: block;
}

.afs-children-indenter {
  color: #00A0F0;
  font-size: 20px;
  float: right;
  padding-left: 10px;
  padding-top: 1px;
}


/*Back Button*/

.afs-back-button {
  display: none;
  text-align: center;
  padding: 10px 20px;
  width: 100px;
  background-color: #00A0F0;
  transition: opacity 300ms;
}

.afs-back-button a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}

.open {
  display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="inner">
    <ul class="afs-menu">
      <li class="afs-menu-item"><a href="#">Menu-item-1</a><span class="afs-children-indenter"><i class="fa fa fa-angle-down"></i></span>
        <div class="afs-dropdown">

          <div class="afs-col">
            <ul>
              <li><a href="#">Menu-item: 1.1</a><span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
                <div class="afs-sub-col">
                  <ul>
                    <li><a href="#">Menuitem1.1.1</a></li>
                    <li><a href="#">Menuitem1.1.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
                           <li><a href="#">Menuitem1.1.3</a></li>
                    <li><a href="#">Menuitem1.1.4</a></li>
                    <li><a href="#">Menuitem1.1.5</a></li>
                    <li><a href="#">Menuitem1.1.6</a></li>
                    <li><a href="#">Menuitem1.1.7</a></li>
                    <div class="afs-sub-sub-col">
                      <ul>
                        <li><a href="#">Menuitem1.1.2.1</a></li>
                        <li><a href="#">Menuitem1.1.2.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
                                  <div class="afs-sub-sub-sub-col">
                                    <ul>
                                      <li><a href="#">menuitem1.2.2.2.1</a></li>
                        <li><a href="#">menuitem1.2.2.2.2</a></li>
                      </ul>
                    </div>
                    </a>
              </li>
              </ul>
              </div>
              <!--sub-sub-col-->
              </a>
      </li>
      </ul>
      </div>
      <!--sub-col-->
      </a>
      </li>
      <li><a href="#">Menu-item: 1.2</a><span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
        <div class="afs-sub-col">
          <ul>
            <li><a href="#">Menuitem1.2.1</a></li>
            <li><a href="#">Menuitem1.2.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
                            <div class="afs-sub-sub-col">
                              <ul>
                                <li><a href="#">Menuitem1.2.2.1</a></li>
            <li><a href="#">Menuitem1.2.2.2<span class="afs-children-indenter"><i class="fa fa fa-angle-right"></i></span>
                                  <div class="afs-sub-sub-sub-col">
                                    <ul>
                                      <li><a href="#">menuitem1.2.2.2.1</a></li>
            <li><a href="#">menuitem1.2.2.2.2</a></li>
          </ul>
        </div>
        </a>
      </li>
    </ul>
    </div>
    <!--sub-sub-col-->
    </a>
    </li>
    </ul>
  </div>
  <!--sub-col-->
  </a>
  </li>
  <li><a href="#">Menu-item-1.3</a></li>
  <li><a href="#">Menu-item-1.4</a></li>
  </ul>
</div>
<!--col-->
</div>
<!--dropdown-->
</li>
<li class="afs-menu-item"><a href="#">Menu-item-2</a><span class="afs-children-indenter"><i class="fa fa fa-angle-down"></i></span>

</li>
<li class="afs-menu-item">
  <a href="#"><a href="#">Menu-item-3</a></a>
</li>
<li class="afs-menu-item">
  <a href="#"><a href="#">Menu-item-4</a></a>
</li>
<div class="afs-back-button">
  <a href="#">Fuel System</a>
</div>

</ul>
</div>
<!--inner-->
</div>
<!--container-->

CodePen Link

1 个答案:

答案 0 :(得分：0)

创建一个新变量，我称之为div 

var div = $(".afs-dropdown");

然后你只需添加一个新类或一个新的CSS 

div.addClass('height');

当用户再次点击菜单链接时，您可以删除课程

div.removeClass('height');

代码将添加一个名为height的新类，height类的css将为height:400px; //or desired amount。

以下是一个示例：https://codepen.io/anon/pen/MvLjwR

告诉我它是否有帮助！

相关问题
最新问题