显示导航下拉菜单而不降低内容答案

【问题标题】：show navigation dropdown without bumping content down显示导航下拉菜单而不降低内容
【发布时间】：2023-03-23 06:58:01
【问题描述】：

我正在修改一些在导航链接悬停时显示 div 的 jQuery。

html：

<a href="/about/" data-drop="#drop-about" class="drop-link">About</a>

<div class="drop" id="drop-about">
    <div class="drop-holder">
        <div class="grey-block">
            <strong class="title">Sub Nav</strong>
            <ul>
                    more links ...
            </ul>
        </div>
    </div>
</div>

jQuery 显示下拉菜单：

function initSlideDrops() {
    var activeClass = 'drop-active';
    var animSpeed = 300;

    jQuery('#nav ul li').each(function() {
        var item = jQuery(this);
        var link = item.find('>a[data-drop^="#"]');
        //if (!link.length) return;

        // Modifications to add hover events to nav menu
        if (!link.length) {
            jQuery(this).on('mouseover', function (e) {
                jQuery("li").removeClass("drop-active");
                jQuery('.drop').each(function () {
                    jQuery(this).stop().animate({
                        height: 0
                    }, animSpeed);
                });
            });

            return;
        };

        var href = link.data('drop');
        var drop = jQuery(href).css({
            height: 0
        });
        if(!drop.length) return;

        var dropHolder = drop.find('>.drop-holder');
        var close = drop.find('.btn-close');

        function showDrop(elem) {
            elem.stop().animate({
                height: dropHolder.innerHeight()
            }, animSpeed, function() {
                elem.css({
                    height: ''
                });
            });
        }

        function hideDrop(elem) {
            elem.stop().animate({
                height: 0
            }, animSpeed);
        }

        link.on('click', function(e) {
            e.preventDefault();
            item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);

            if(item.hasClass(activeClass)) {
                showDrop(drop);
                hideDrop(drop.siblings());
            } else {
                hideDrop(drop);
                location.href = link.attr('href');
            }
        });

        close.on('click', function(e) {
            e.preventDefault();
            item.add(drop).removeClass(activeClass);
            hideDrop(drop);
        });

        // Modifications to add hover events to nav menu
        link.on('mouseover', function (e) {
            e.preventDefault();
            item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);

            if (item.hasClass(activeClass)) {
                showDrop(drop);
                hideDrop(drop.siblings());
            } else {
                hideDrop(drop);
                //location.href = link.attr('href');
            }
        });

        drop.on('mouseleave', function (e) {
            e.preventDefault();
            item.add(drop).removeClass(activeClass);
            hideDrop(drop);
        });
    });
}

这一切正常，但是下拉导航会导致内容向下移动，而不是在网站主体顶部滑动。我希望主要内容保持原样，悬停时导航显示在顶部。我曾尝试在动画事件期间添加 z-index，但无法使其正常工作。实现此目的的正确方法是什么？

感谢任何帮助。

编辑：

SASS：

.drop{
    @extend %clearfix;
    overflow:hidden;
    text-transform:uppercase;
    letter-spacing: 1.65px;
    .drop-holder{
        overflow:hidden;
    }
}

【问题讨论】：

请发布您的相关CSS。您可能需要在下拉菜单中浮动或使用绝对定位。
感谢您的回复。我已经用 SASS 为这门课编辑了我的问题。
尝试将position:absolute; 添加到.drop-holder。

标签： javascript jquery html css jquery-animate

【解决方案1】：

尝试将position:absolute; 添加到.drop-holder. 参见下面的sn-p。

您还需要从.drop 中删除overflow:hidden;。

.drop{
    @extend %clearfix;
    /* overflow:hidden; - Remove this */
    text-transform:uppercase;
    letter-spacing: 1.65px;
    position:relative; /* add this so .drop is positioned relative to .drop */
}

.drop-holder {
    position:absolute;
    border:solid 1px teal; /*for demonstration*/
  }

<a href="/about/" data-drop="#drop-about" class="drop-link">About</a>

<div class="drop" id="drop-about">
    <div class="drop-holder">
        <div class="grey-block">
            <strong class="title">Sub Nav</strong>
            <ul>
                    more links ...
            </ul>
        </div>
    </div>
</div>
<div>content <br />content <br />content <br />content <br />content <br />content <br />content <br />
  </div>

【讨论】：

【解决方案2】：

使用 z-index 时必须指定定位属性。

示例。申请

.drop{
 @extend %clearfix;
    overflow:hidden;
    text-transform:uppercase;
    letter-spacing: 1.65px;
    position:relative; /*Positioning applied here*/
    z-index:1;
}

这应该可以解决您的问题。

【讨论】：