试图隐藏元素生成的空间

Question

我有一个小菜单，用于在关闭菜单且未打开时显示项目，菜单下正在生成大量空间。我知道这种情况的发生是因为我的子菜单正在创建这些框，为此，我的样式属性是visibility: hidden 当我将其更改为.display: none;时，此问题已解决，并且不再生成空白。但是，我无法再显示子菜单！ （显示：无原因） 我假设我必须通过OnClick事件将.display: none更改为inline-block。经过几次尝试，我无法弄清楚！到目前为止，这是我的代码：

(function(window) {

    'use strict';

    var document = window.document;

    function extend(a, b) {
        for (var key in b) {
            if (b.hasOwnProperty(key)) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function cbpHorizontalSlideOutMenu(el, options) {
        this.el = el;
        this.options = extend(this.defaults, options);
        this._init();
    }

    cbpHorizontalSlideOutMenu.prototype = {
        defaults: {},
        _init: function() {
            this.current = -1;
          this.touch = Modernizr.touch;
          this.menu = this.el.querySelector('.cbp-hsmenu');
          this.menuItems = this.el.querySelectorAll('.cbp-hsmenu > li');
          this.menuBg = document.createElement('div');
          this.menuBg.className = 'cbp-hsmenubg';
          this.el.appendChild(this.menuBg);
          this._initEvents();
        },
        _openMenu: function(el, ev) {
            var self = this,
            item = el.parentNode,
            items = Array.prototype.slice.call(this.menuItems),
            submenu = item.querySelector('.cbp-hssubmenu'),
            closeCurrent = function(current) {
                var current = current || self.menuItems[self.current];
                current.className = '';
                current.setAttribute('data-open', '');
            },
            closePanel = function() {
                self.current = -1;
                self.menuBg.style.height = '0px';
            };

            if (submenu) {

                ev.preventDefault();

                if (item.getAttribute('data-open') === 'open') {
                    closeCurrent(item);
                    closePanel();
                } 

                else {
                    item.setAttribute('data-open', 'open');
                    if (self.current !== -1) {
                        closeCurrent();
                    }
                    self.current = items.indexOf(item);
                    item.className = 'cbp-hsitem-open';
                    self.menuBg.style.height = submenu.offsetHeight + 'px';

                }
            } 

            else {
                if (self.current !== -1) {
                    closeCurrent();
                    closePanel();
                }
            }

        },

        _initEvents: function() {
            var self = this;

            Array.prototype.slice.call(this.menuItems).forEach(function(el, i) {
                var trigger = el.querySelector('a');
                if (self.touch) {
                    trigger.addEventListener('touchstart', function(ev) {
                        self._openMenu(this, ev);
                    });
                } 

                else {
                    trigger.addEventListener('click', function(ev) {
                        self._openMenu(this, ev);
                    });
                }
            });

            window.addEventListener('resize', function(ev) {
                self._resizeHandler();
            });
        },
        _resizeHandler: function() {
        var self = this;

        function delayed() {
            self._resize();
            self._resizeTimeout = null;
        }

        if (this._resizeTimeout) {
            clearTimeout(this._resizeTimeout);
        }
            this._resizeTimeout = setTimeout(delayed, 50);
        },
        _resize: function() {
            if (this.current !== -1) {
                this.menuBg.style.height = this.menuItems[this.current].querySelector('.cbp-hssubmenu').offsetHeight + 'px';
            }
        }
    }

    // add to global namespace
    window.cbpHorizontalSlideOutMenu = cbpHorizontalSlideOutMenu;

})(window); 

css

.cbp-hssubmenu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 0;
    text-align: center;
    visibility: hidden;
    left: 0;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    list-style: none;
    background-color: rgb(233, 237, 239);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

HTML

<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
  <div class="cbp-hsinner">
    <h1>Our Amazing Menu</h1>
    <ul class="cbp-hsmenu">
        <li>
            <span class="anchormenu" id="Menu"></span>
            <a href="#">Mini Desserts</a>
            <ul class="cbp-hssubmenu">
                <li>
                    <a href="#"><img src="images/Mini Desserts/StrawberryCheeseCake.jpg" alt="img01" /><span>Strawberry Cheese Cake</span><span>Per Dozen $22</span></a>
                </li>
                <li>
                    <a href="#"><img src="images/Mini Desserts/ChocolateTorte.jpg" alt="img02" /><span>Chocolate Torte</span><span>Per Dozen $22</span></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Macaroons</a>
                <ul class="cbp-hssubmenu cbp-hssub-rows">
                    <li>
                        <a href="#"><img src="images/Macaroons/Cookies&Cream.jpg" alt="img07" /><span>Cookies&Cream</span><span>$1.00</span></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/Macaroons/RedVelvet.jpg" alt="img08" />
                        <span>Red Velvet</span><span>$1.00</span></a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>