Question

我创建了一个子导航，当我点击它时（使用我的jquery代码），它向下滚动，我可以将鼠标悬停在链接上，但它们根本不显示。

我尝试了解可能导致问题的原因，例如color或background，但我无法找出问题所在。我正在弄乱元素的visibility和display，但我不认为那里有问题，虽然我不确定。

要隔离代码问题所在的位置，这里是子导航代码：

ul {
    padding: 0;
    position: absolute;
    top: 33px; right: 16px;
    width: 150px;
    display: none;
    opacity: 0;
    visibility: hidden;

    @include transition('all .2s ease-in-out');

    li {
        display: block;
        width: 100%;

        a {
            width: 100%;
            display: block;
            background: lighten(#27344C, 10);
            color: #FFF;
            padding: 0;
            padding-right: 14px;

            @include transition('all .2s ease-in-out');
        }
    }
    li:hover {
        a { background: lighten(#27344C, 5); }
    }
}

我认为当编辑css样式时，问题实际上可能就是这行上的javascript：

$('#profileToggle').on('click', function() {
        $('#profileList').slideToggle().css({'visibility': 'visible', 'display': 'block'});
        $(this).addClass('active');
    });

这是JSFiddle：http://jsfiddle.net/8xat4v97/1/ （从scss代码的第112行开始）

Answer 1

与@BillyNate所说的一样，

在我的子导航中出于某种原因将不透明度设置为0。

删除此行修复了问题！谢谢:)）

当我在响应视图中单击它时，子导航消失

1 个答案: