bootstrap 3折叠菜单滑落得太远，然后跳了起来

Question

嗨，我正在使用引导程序的“折叠” javascript组件插件创建导航菜单。

菜单高度将根据列出的菜单项数量而有所不同，因此我不想设置固定高度。

如果可能的话，我想保持向下滑动的折叠效果，但是，我想解决以下事实，即菜单似乎过度滑动了其内容的高度，然后又跳到了正确的高度。请单击汉堡菜单以查看我遇到的问题。

https://codepen.io/angusgrant/pen/djoXJj

html：

<div class="main-navigation-menu">
<button type="button" class="main-navigation-menu__button" data-toggle="collapse" data-target="#collapse-main-nav" aria-haspopup="true" aria-expanded="false">
                            <span class="icon-bar bar-one"></span>
                            <span class="icon-bar bar-two"></span>
                            <span class="icon-bar bar-three"></span>
                          </button>
                       <div class="collapse main-navigation-menu__dropdown 
                        main-navigation-dropdown" id="collapse-main-nav">
                        <ul class="main-navigation-dropdown__menu" >
                            <li class="main-navigation-dropdown__item">
                                <a href="#" class="main-navigation-dropdown__link">link 1</a>
                                <span class="main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu">
                                    <span class="glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron js-toggle-main-menu-item"></span>
                                </span>
                                <ul class="main-navigation-dropdown__submenu js-toggle-display-sub-menu">
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 1</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 2</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item" >
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 3</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 4</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 5</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="main-navigation-dropdown__item">
                                <a href="#" class="main-navigation-dropdown__link">link 2</a>
                                <span class="main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu">
                                    <span class="glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron"></span>
                                </span>
                                <ul class="main-navigation-dropdown__submenu js-toggle-display-sub-menu">
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 1</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 2</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item" >
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 3</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 4</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 5</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="main-navigation-dropdown__item">
                                <a href="#" class="main-navigation-dropdown__link">link 3</a>
                                <span class="main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu">
                                    <span class="glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron"></span>
                                </span>
                                 <ul class="main-navigation-dropdown__submenu js-toggle-display-sub-menu">
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 1</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 2</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item" >
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 3</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 4</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 5</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="main-navigation-dropdown__item">
                                <a href="#" class="main-navigation-dropdown__link">link 4</a>
                                <span class="main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu">
                                    <span class="glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron"></span>
                                </span>
                                  <ul class="main-navigation-dropdown__submenu js-toggle-display-sub-menu">
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 1</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 2</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item" >
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 3</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 4</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 5</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="main-navigation-dropdown__item">
                                <a href="#" class="main-navigation-dropdown__link">link 5</a>
                                <span class="main-navigation-dropdown__toggle-expand js-link-toggle-main-sub-menu">
                                    <span class="glyphicon glyphicon-chevron-down main-navigation-dropdown__chevron"></span>
                                </span>
                                 <ul class="main-navigation-dropdown__submenu js-toggle-display-sub-menu">
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 1</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 2</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item" >
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 3</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 4</a>
                                    </li>
                                    <li class="main-navigation-dropdown__submenu-item">
                                        <a href="#" class="main-navigation-dropdown__submenu-link ">sub menu item 5</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        </div>
                </li>
</div>

更少的CSS：

@link-color: #333;
.main-navigation-menu {
    margin-top: 7px;
        margin-left: 5px;
      position: relative;
     .main-navigation-menu__button {
        padding: 2px 8px;
        border: none;
        display: block;
        background-color: #fff;
              &:focus {
                  outline: none;
              }
            span.icon-bar {
                background: @link-color;
                margin: 1px 0 7px;
                display: block;
                width: 28px;
                height: 2px;
                border-radius: 1px;
                }
        }
     .main-navigation-menu__button[aria-expanded="true"] {
        span.icon-bar {
            background: @link-color;
            width: 28px;
            margin: 5px 0;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
            transition: all .3s ease;
        }
        span.icon-bar.bar-one {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            position: relative;
            top: 6px;
        }
        span.icon-bar.bar-two {
            display: none;
        }
        span.icon-bar.bar-three {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            position: relative;
        }

    }
    .main-navigation-menu__dropdown {
        position: absolute;
        top:34px;
        left:0;

    }
}

.main-navigation-dropdown {
    min-width: 450px;
    max-width: 600px;
    width:auto;
    @media (max-width: 600px) {
        min-width: none;
        max-width: none;
        width: 100vw;
    }
    padding: 20px;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(51,51,51,1);
    -moz-box-shadow: 0px 0px 7px 0px rgba(51,51,51,1);
    box-shadow: 0px 0px 7px 0px rgba(51,51,51,1);
    background-color: #fff;
        .main-navigation-dropdown__menu,
        .main-navigation-dropdown__submenu {
            padding-left:0;
            list-style: none;
        }
        .main-navigation-dropdown__item {
            border-bottom: 1px solid @link-color;
            position:relative;
            clear: both;
            float: left;
            width: 100%;
            &:last-child {
                border: none;
            }
        }
        .main-navigation-dropdown__link {
            padding: 16px 22px 16px 0; 
            display: block;
            white-space: nowrap;
        }
        .main-navigation-dropdown__toggle-expand {
            position:absolute;
            right: 0;
            width:40%;
            text-align:right;
            cursor: pointer;
            top: 0px;
        }
        .main-navigation-dropdown__chevron {
            line-height: 56px;
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
            -o-transition-duration: 0.5s;
            transition-duration: 0.5s;
            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            -o-transition-property: -o-transform;
            transition-property: transform;
            outline: 0;
                 &:focus, &:active, &:hover {
                color: red;
            }
            &.is-active {
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
           }
         }
        .main-navigation-dropdown__submenu {
            display:none;
        }

        .main-navigation-dropdown__submenu-item {
            width:50%;
            float: left;
        }

        .main-navigation-dropdown__submenu-link  {
            width:100%;
            text-align:left;
            display:block;
            padding: 10px 0;
            font-size: 14px;
            &:first-child {
                padding-top: 0px;
            }
            &:last-child {
                padding-bottom: 15px;
            }
        }



 }

Answer 1

问题是#collapse-main-nav元素上有填充。我不确定，但是引导Javascript可能正在尝试获取innerHeight，它不包含填充，因此会扩展到错误的高度。在过渡结束时，将删除内联高度，并且下拉列表将恢复为实际高度，这是导致跳转的原因。我所做的只是从#collapse-main-nav删除了填充，而是向main-navigation-dropdown__menu添加了边距。

由于浮动li导致.main-navigation-dropdown__menu ul崩溃而仍然引起一些跳跃，这很可能影响了javascript获得实际高度的能力。下拉菜单也是如此。为了解决这个问题，我只添加了一个伪元素:after和.main-navigation-dropdown__menu ul，并应用了clear:both和display:block。

https://codepen.io/anijack/pen/ejNreK