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

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。

删除此行解决了问题！谢谢:)