为什么我的CSS代码中的will-change不起作用？

问题描述 投票：0回答：1

在 css 文件中的第 1161-1176 行和 1190-1206 行以及 js 文件中的第 58-67 行，当我单击搜索徽标时没有任何反应。

但是，我希望当您点击搜索栏时，它会像视频一样显示。

代码片段 - 完整的 GitHub 存储库

/* lines 58-67 */

const searchButton = document.querySelector('.t-search'),
      tClose = document.querySelector('.search-close'),
      showClass = document.querySelector('.site');
searchButton.addEventListener('click', function() {
    showClass.classList.toggle('showsearch')
})

/* lines 1161-1176 */

.search-bottom {
    position: fixed;
    bottom: 60px;
    width: var(--percent100);
    padding: 2.5em 0;
    background-color: var(--secondary-dark-color);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    will-change: visibility, opacity;
}

.showsearch .search-bottom {
    visibility: inherit;
    opacity: 1;
}

/* lines 1190-1206 */

.overlay {
    position: fixed;
    width: var(--percent100);
    height: var(--percent100);
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    will-change: visibility, opacity;
}

.showmenu .overlay {
    opacity: 1;
    visibility: inherit;
}
javascript html css onclick
1个回答
0
投票

好吧，我发现了错误！

您正在将 

showsearch
类名称切换到类名称为 
.site
的 div， 然后你编写这样的CSS代码来显示搜索输入字段，

.showsearch .search-bottom {
    visibility: inherit;
    opacity: 1;
}

这不起作用，因为 

.showsearch
是 
not a Descendant child
的 
.site
。

<html>
    <body>
        <div class="site showsearch">
           ...
           ...
        </div>
        ...
        <div class="search-bottom desktop-hide">
           ...
        </div>
    </body>
</html>

要解决此问题，请将 

.showsearch
类添加到 
.site
，而不是在 
.showsearch
div 上切换 
body
。这是 javascript 片段的修改版本。

const searchButton = document.querySelector('.t-search'),
    tClose = document.querySelector('.search-close'),
    // showClass = document.querySelector('.site');
    showClass = document.querySelector('body');
searchButton.addEventListener('click', function () {
    showClass.classList.toggle('showsearch')
})

现在当 

.showsearch
切换时，它看起来像这样。

<html>
    <body class="showsearch">
        <div class="site">
           ...
           ...
        </div>
        ...
        <div class="search-bottom desktop-hide">
           ...
        </div>
    </body>
</html>

而且，当 

overlay
切换时，您的 
showmenu
不可见，要解决此问题，请更改 
querySelector
部分的 
show mobile menu
中的 
line 20
，以也显示 
overlay
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.