我的工作场所使用 Google 站点，我能够创建一个 CSS 下拉菜单来容纳链接信息，如下所示:
但是，我想知道是否还有一种方法可以在顶部为用户提供一个文本框，他们可以用它来搜索整个容器，而不是手动单击每个部分。像什么W3Schools有，但专门针对这个包含子部分的容器。
如能提供任何帮助/指导，我们将不胜感激。
这是代码.GS
function doGet() {
var result=HtmlService.createTemplateFromFile('TestSidebar').evaluate();
return result;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
这是Html
<!DOCTYPE html>
<!-- Notes for whoever looks at this in the future:
HTML/CSS modified in December 2017, taken from https://codepen.io/alexdevero/pen/avKpLX
Groups are in incremental numbers, along with sub-group and sub-sub-group
group-X
sub-group-X
sub-sub-group-X
sub-sub-sub-group-X
Technically, the CSS stylesheet allows for unlimited nesting. However, if more than 4 groups
are needed, then more sub-groups will need to be defined on the stylesheet
Body beautified at https://codebeautify.org/htmlviewer/
-->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS sliding multi-level accordion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300'>
<?!= include('Stylesheet'); ?>
</head>
<body>
<header role="banner">
<nav class="nav" role="navigation">
<ul class="nav__list">
<!-- Forms -->
<li>
<input id="group-Delivery/Tracking" type="checkbox" hidden />
<label for="group-Delivery/Tracking">
<span class="fa fa-angle-right"></span> Forms
</label>
<ul class="group-list">
<li>
<li>
<a href="https://www.google.com/forms/about/" target="_blank">Google Forms</a>
</li>
<li>
<a href="https://www.surveymonkey.com/" target="_blank">Survey Monkey</a>
</li>
</ul>
</li>
<li>
<input id="group-links" type="checkbox" hidden />
<label for="group-links">
<span class="fa fa-angle-right"></span> Links
</label>
<ul class="group-list">
<li>
<li>
<a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
</li>
<li>
<a href="https://www.google.com/" target="_blank">Google</a>
</li>
</ul>
</li>
<!-- Final </ul> needed for Nav Pane -->
</ul>
</nav>
<!-- Commenting out; social media links not needed now, but maybe in the future
<footer><ul class="soc-media"><li><a href="https://twitter.com/alexdevero" target="_blank"><span class="fa fa-twitter"></span></a></li><li><a href="https://www.facebook.com/deveroalex" target="_blank"><span class="fa fa-facebook"></span></a></li><li><a href="https://plus.google.com/+AlexDevero" target="_blank"><span class="fa fa-google-plus"></span></a></li><li><a href="http://blog.alexdevero.com" target="_blank"><span class="fa fa-globe"></span></a></li></ul></footer>
-->
</header>
</body>
</html>
这是 CSS(我假设任何搜索框都会去哪里？)
<style>
body {
vertical-align: true;
font: 100% "Roboto", "Trebuchet MS", sans-serif;
}
a {
text-decoration: none;
}
/**
* Hidden fallback
*/
[hidden] {
display: none;
visibility: hidden;
}
/**
* Styling navigation
*/
header {
margin-right: auto;
margin-left: auto;
vertical-align: true;
/*max-width: 22.5rem;*/
-webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}
/**
* Styling top level items
*/
.nav a,
.nav label {
display: block;
padding: .25rem;
color: #fff;
font-size: 100%;
background-color: #012F60;
vertical-align: true;
-webkit-box-shadow: inset 0 -1px #1d1d1d;
box-shadow: inset 0 -1px #1d1d1d;
-webkit-transition: all .10s ease-in;
transition: all .10s ease-in;
border-radius: 0px;
}
.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
color: #012F60;
background: #DEB01A;
}
.nav label {
cursor: pointer;
}
/**
* Styling first level lists items
*/
.group-list a,
.group-list label {
padding-left: .5rem;
vertical-align: true;
font-size: 85%;
color: #fff;
background: #8E8E8F;
-webkit-box-shadow: inset 0 -1px #373737;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover,
.group-list label:focus,
.group-list label:hover {
background: #DEB01A;
}
/**
* Styling second level list items
*/
.sub-group-list a,
.sub-group-list label {
padding-left: 1rem;
background: #012F60;
color: #fff;
-webkit-box-shadow: inset 0 -1px #474747;
box-shadow: inset 0 -1px #474747;
}
.sub-group-list a:focus, .sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
background: #DEB01A;
}
/**
* Styling third level list items
*/
.sub-sub-group-list a,
.sub-sub-group-list label {
padding-left: 1.5rem;
background: #8E8E8F;
color: #fff;
-webkit-box-shadow: inset 0 -1px #575757;
box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
background: #DEB01A;
}
/**
* Styling fourth level list items
*/
.sub-sub-sub-group-list a,
.sub-sub-sub-group-list label {
padding-left: 2rem;
background: #012F60;
color: #fff;
-webkit-box-shadow: inset 0 -1px #474747;
box-shadow: inset 0 -1px #474747;
}
.sub-sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-sub-group-list label:focus,
.sub-sub-sub-group-list label:hover {
background: #DEB01A;
}
/**
* Hide nested lists
*/
.group-list,
.sub-group-list,
.sub-sub-group-list,
.sub-sub-sub-group-list{
height: 100%;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .25s ease-in-out;
transition: max-height .25s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
transform: translateZ(0);
}
.nav__list input[type=checkbox]:checked + label + ul {
/* reset the height when checkbox is checked */
max-height: 1000px;
}
/**
* Rotating chevron icon
*/
label > span {
float: +.1rem + left + .1rem;
vertical-align: true;
-webkit-transition: -webkit-transform .25s ease;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease;
}
.nav__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/**
* Styling footer
*/
footer {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #050505;
}
.soc-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.soc-media li:nth-child(n+2) {
margin-left: 1rem;
}
.soc-media a {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.65);
-webkit-transition: color .25s ease-in;
transition: color .25s ease-in;
}
.soc-media a:focus, .soc-media a:hover {
color: rgba(255, 255, 255, 0.2);
}
</style>
感谢您的关注!
最佳答案
如果您使用 W3School 上显示的解决方案并简单地更改列表迭代以包含一个额外级别的类别，那么您应该会看到一些成功。
所以你只需要添加一个输入框，并在onkeyup中添加一个过滤功能即可。
<input type="text" onkeyup="filterfunction()"/>
例如，您可以采用他们的过滤功能
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
暂时把它改造成这样的东西
function filterFunction() {
var input, filter, ul, li, cat, rows, i, j;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
cat = div.children;
for (i = 0; i < cat.length; i++) {
var displayCat = false;
rows = cat[i].getElementsByTagName("*");
for (j = 0; j < rows.length; j++){
if (rows[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
rows[i].style.display = "";
displayCat = true;
} else {
rows[i].style.display = "none";
}
}
if(displayCat){
cat[i].style.display = "";
//add some code to expand your list automatically
}else{
cat[i].style.display = "none";
}
}
}
如果您决定合并更多类别，您可以通过将其更改为树迭代来简化整个过程。
关于html - 如何将 CSS/HTML 搜索框用于 Google 协作平台中带有 Apps 脚本的链接部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52099595/