Google协作平台上的JavaScript手风琴（经典）

时间：2017-06-01 14:20:55

标签： javascript google-sites

我正在尝试在经典的Google协作平台页面上创建常见问题手风琴，但无法确定最佳路线。

我最接近的是将w3schools.com中的示例复制到HTML小工具中（下面的代码）。但是，面板似乎没有扩展，我也不太了解代码的一部分。

我也尝试过托管自定义小工具，但谷歌已经变得非常严格，无法弄清楚如何托管。

这是一个带有代码的测试页面： https://sites.google.com/a/cartomark.com/test/

以下是代码：

<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
</script>

1 个答案:

答案 0 :(得分：1)

简短回答

使用HTML Box小工具或创建Google Apps脚本网络应用并将其作为小工具插入。

解释

HTML Box小工具

另一种方法是使用HTML Box小工具将HTML / CSS / JavaScript代码插入Google协作平台页面。这种替代方案的一个优点是高度将自动调整内容。

有关详细信息，请参阅Create custom page layouts or gadgets，但请注意，并非所有内容的工作方式与其他地方相同。在这种特定情况下，它看起来HTML Box不支持nextElementSibling。解决方法是替换

var panel = this.nextElementSibling;

通过

var panel = nextElementSibling(this);

或

var panel = this.nextElementSibling || nextElementSibling(this);

并在最后添加添加

function nextElementSibling( el ) {
    do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
    return el;
}

我从answer user113716到Portability of nextElementSibling/nextSibling

从a question接受了这个想法
  

注意：我在官方Google协作平台帮助论坛上发布了Three accordions collapsed on a Google Sites page，询问为什么this.nextElementSibling会返回null。

截图

The second of three accordions expanded on a Google Sites page

answer

代码

<style>
  button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  
  button.accordion.active,
  button.accordion:hover {
    background-color: #ddd;
  }
  
  button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  button.accordion.active:after {
    content: "\2212";
  }
  
  div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
</style>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button id="button_1" class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button id="button_2" class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button id="button_3" class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling || nextElementSibling(this);
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    }
  }


  function nextElementSibling(el) {
    do {
      el = el.nextSibling
    } while (el && el.nodeType !== 1);
    return el;
  }
</script>

Google Apps脚本网络应用

另一种方法是创建Google Apps脚本网络应用程序，将其作为Google Apps脚本小工具插入。这种替代方案的“问题”在于它的高度是静态的。该小工具可以选择在需要时显示垂直滚动条。有关如何执行此操作的详细步骤，请参阅我的Invoke app scripts with parameters from classic google site至https://jsfiddle.net/7ntdes6t/

相关问题
最新问题