我的工作场所使用Google站点,我能够创建一个CSS下拉菜单来存放链接信息,如下所示:
然而,我想知道是否有一种方法可以在顶部给用户一个文本框,他们可以使用它来更快地搜索整个容器,而不是手动单击每个部分。类似于W3Schools,但它是专门针对这个容器的,其中包含子部分。
如果您们能提供任何帮助/指导,我们将不胜感激。
这是Code.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>
感谢您的关注!
发布于 2018-08-31 04:42:58
如果您使用W3Schools上显示的解决方案,并简单地更改列表迭代,为您的类别合并一个额外的级别,那么您应该会看到一些成功。
因此,您所需要做的就是添加一个输入框,并向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";
}
}
}
如果您决定合并更多的类别,您可以通过将其更改为树迭代来简化整个过程。
https://stackoverflow.com/questions/52099595
复制相似问题