两个导航都出来了，点击第一个导航时如何隐藏第二个导航？

Question

我在移动设备中遇到了两个导航栏的问题。当我点击第一个导航栏图标时，两个导航都出来了。我正在尝试 CSS 可见性：单击图标时没有代码，但我没有得到正确的结果。你能帮我么？

我在下面附上了图片供您参考。

这是两个导航栏。一黑一白。

这就是我遇到问题的地方。正如你所看到的，两者都出来了。

这就是我们点击导航栏 2 时发生的情况。这是正确的。

谢谢。

Answer 1

从这里移除可见性选项：

.td-js-loaded .td-menu-background, .td-js-loaded #td-mobile-nav {
    /* visibility: visible;    ----- remove this */
    -webkit-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
    -moz-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
    -o-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
    transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

添加可见性：

.td-menu-mob-open-menu #td-mobile-nav {
    height: auto;
    overflow: auto;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    left: 0;
    visibility: visible;    /* it's added here */
}

在：

.td-menu-mob-open-menu .td-menu-background {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    visibility: visible;    /* it's added here */
}

它将解决您当前的问题。

但你必须再考虑两件事，这样如果用户打开第二个导航并滚动他只能看到导航菜单，直到他/她不会关闭它。

.td-menu-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: absolute;   /* before it was position: fixed; */
    display: block;
    width: 100%;
    height: 113%;
    z-index: 9999;
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
}

为了在白色背景上显示十字按钮，你应该改变它的颜色：

.td-mobile-close .td-icon-close-mobile {
    height: 70px;
    width: 70px;
    line-height: 70px;
    font-size: 21px;
    color: #bdbdbd;  /* before it was "color: #fff;" if you don't like "color: #bdbdbd;" you can change it with your desire color  */ 
    top: 4px;
    position: relative;
}