Question

我正在修改一些在导航链接悬停时显示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);
        });
    });
}

这一切都正常，但是下拉导航会导致内容崩溃，而不是在站点主体顶部滑动。我希望主要内容保持原样，悬停时导航显示在顶部。我尝试在animate事件期间添加z-index但无法使其工作。完成此任务的正确方法是什么？

感谢任何帮助。

修改

SASS：

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

Answer 1

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

实施例。应用

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

这可以解决您的问题。

Answer 2

尝试将position:absolute;添加到.drop-holder.请参阅下面的代码段。

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

.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 个答案: