如何使用javascript为溢出的子菜单和子子菜单项动态调整css答案

【问题标题】：How do I dynamically adjust css using javascript for sub menu and sub sub menu items that overflow如何使用javascript为溢出的子菜单和子子菜单项动态调整css
【发布时间】：2016-01-30 22:10:29
【问题描述】：

我正在用 CSS 构建一个菜单，并希望确保子菜单和子子菜单保持在屏幕上并且不会溢出。它用于响应式 html 布局，我想动态调整 CSS，以便在调整屏幕大小时，受修复影响的菜单项现在可能位于下一行和最左侧重置...这是我尝试过的..（我的css和javascript很差）

HTML:
    <body>
    <div class="container">

    <div id='cssmenu'>

    <ul class='dropdown'>
      <li><a href='#'><span>Home</span></a></li>
      <li class='active has-sub'><a href='#'><span>Products</span></a>
    <ul>
      <li class='has-sub'><a href='#'><span>Product 1</span></a>
    <ul>
      <li><a href='#'><span>Sub Product</span></a></li>
      <li class='last'><a href='#'><span>Sub Product</span></a></li>
    </ul>
    </li>
    <li class='has-sub'><a href='#'><span>Product 2</span></a>
    <ul>
     <li><a href='#'><span>Sub Product</span></a></li>
     <li class='last'><a href='#'><span>Sub Product</span></a></li>
    </ul>
    </li>
   </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
   <ul>
    <li class='has-sub'><a href='#'><span>Product 1</span></a>
     <ul>
      <li><a href='#'><span>Sub Product</span></a></li>
      <li class='last'><a href='#'><span>Sub Product</span></a></li>
     </ul>
    </li>
    <li class='has-sub'><a href='#'><span>Product 2</span></a>
     <ul>
      <li><a href='#'><span>Sub Product</span></a></li>
      <li class='last'><a href='#'><span>Sub Product</span></a></li>
     </ul>
    </li>
   </ul>
  </li>
</ul>
</div>
</div>
</body>

CSS:




    body {
        background:red;
    }
    .container {
        margin:30px;
        background:#fff;
        padding-bottom:400px;
    }
    .dropdown, .dropdown li, .dropdown ul {
        list-style:none;
        margin:0;
        padding:0;
    }
    .dropdown {
        position:relative;
        z-index:10000;
        float:left;
        width:100%;
    }
    .dropdown ul {
        position:absolute;
        top:100%;
        visibility:hidden;
        display:none;
        z-index:900;
        width:16em;
    }
    .dropdown ul ul {
        top:0;
    }
    .dropdown li {
        position:relative;
        float:left;
    }
    .dropdown li:hover {
        z-index:910;
    }

    .dropdown ul:hover, .dropdown li:hover > ul, .dropdown a:hover + ul, .dropdown a:focus + ul {
        visibility:visible;
        display:block;
    }
    .dropdown a {
        display:block;
        background:#000;
        color:#fff;
        padding:1em 2em;
    }
    .dropdown ul li {
        width:100%;
    }
    .dropdown li:hover a {
        background:#333;
    }
    .dropdown li a:focus, .dropdown li a:hover {
        background:#666;
    }

    .dropdown .nonedge ul li ul li{
      left:100%;
    }
    .dropdown .edge ul {
    right:0px;
     }

    .dropdown .edge ul li ul {
      left:-100%;
     }





JAVASCRIPT



    $(function () {

    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('ul', this).length) {
            var elm = $('ul:first', this);
            var off = elm.offset();
            var l = off.left;
            var w = elm.width();
            var docH = $(".container").height();
            var docW = $(".container").width();

            var isEntirelyVisible = (l + w <= docW);

            if (!isEntirelyVisible) {
                $(this).addClass('edge');
            } else {
                $(this).removeClass('edge');
            }
        }
    });
    });
    $(function () {

    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('ul', this).length) {
            var elm = $('ul:first', this);
            var off = elm.offset();
            var l = off.left;
            var w = elm.width();
            var docH = $(".container").height();
            var docW = $(".container").width();

            var isEntirelyVisible = (l + w <= docW);

            if (!isEntirelyVisible) {
                $(this).removeClass('nonedge');
              } else {  
               $(this).addClass('nonedge');
     }
     }
    });
    });

http://jsfiddle.net/G7qfq/739/

【问题讨论】：

我最终这样做了...jsfiddle.net/qg487uL0/2

标签： javascript jquery css drop-down-menu menu

【解决方案1】：

<script>
 $(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
 });
</script>

子菜单

/* CSS: */
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>

/* JS: */
<script>
 $(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
 });
</script>

【讨论】：