文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用CSS/HTML搜索框的链接部分谷歌网站与应用程序脚本？

问如何使用CSS/HTML搜索框的链接部分谷歌网站与应用程序脚本？
EN

Stack Overflow用户
提问于 2018-08-30 22:32:09
回答 1查看 164关注 0票数 0

我的工作场所使用Google站点，我能够创建一个CSS下拉菜单来存放链接信息，如下所示：

​

然而，我想知道是否有一种方法可以在顶部给用户一个文本框，他们可以使用它来更快地搜索整个容器，而不是手动单击每个部分。类似于W3Schools，但它是专门针对这个容器的，其中包含子部分。

如果您们能提供任何帮助/指导，我们将不胜感激。

这是Code.GS

代码语言：javascript
复制
function doGet() {
var result=HtmlService.createTemplateFromFile('TestSidebar').evaluate();
return result;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

这是Html

代码语言：javascript
复制
<!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 (我假设任何搜索框都会放在这里？)

代码语言：javascript
复制
<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>

感谢您的关注！

html
css
google-sites
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-31 04:42:58

如果您使用W3Schools上显示的解决方案，并简单地更改列表迭代，为您的类别合并一个额外的级别，那么您应该会看到一些成功。

因此，您所需要做的就是添加一个输入框，并向onkeyup添加一个过滤函数。

代码语言：javascript
复制
<input type="text" onkeyup="filterfunction()"/>

例如，您可以使用它们的过滤函数

代码语言：javascript
复制
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";
        }
    }
}

把它变成现在这样的东西

代码语言：javascript
复制
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";
        }
    }
}

如果您决定合并更多的类别，您可以通过将其更改为树迭代来简化整个过程。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52099595

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档