手风琴：隐藏/显示 iframe onclick答案

【问题标题】：Accordion: Hide/Show iframe onclick手风琴：隐藏/显示 iframe onclick
【发布时间】：2017-03-21 18:05:05
【问题描述】：

我基本上是在我的“面板”类中添加一个 iframe。我希望 iframe 在单击按钮时显示，如果再次单击，则隐藏它。我该怎么做呢？

这是我的手风琴的 html 代码：

<button class="accordion">Link1</button>
    <div class="panel">
        <iframe src="linkcodehere" class="iframestreet" style="border:0; display:none; visibility: hidden;"></iframe>
        //some other code to display information
    </div>
<button class="accordion">Link2</button>
    <div class="panel">
        <iframe src="linkcodehere2" class="iframestreet" style="border:0; display:none; visibility: hidden;"></iframe>
        //some other code to display information
    </div>

这是 javascript 在类面板中显示元素的代码：

$(document).ready(function() {
    var acc = document.getElementsByClassName("accordion");
    var i;
    var id = document.getElementsByClassName("iframestreet");

    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";
            }
            if (id[i].style.display == 'block'){ 
                console.log("hide this");
                id[i].style.display = 'none';
                id[i].style.visibility = 'hidden'; 
            } else {
                console.log("display it");
                id[i].style.display = 'block';
                id[i].style.visibility = 'visible';
            }
        }
    }
});

查看控制台日志时出现此错误：Uncaught TypeError: Cannot read property 'style' of undefined

【问题讨论】：

命名事物 id 不是一个好习惯，因为它被大量用于 id 并且命名手风琴 acc 也不是很可读。这样你不会真正从你的程序中节省时间，而且你可能会为工作增加时间，因为它令人困惑。我还建议为此创建一个 jsFiddle。
getElementByClass 不是函数。
你的 HTML 有一些额外的 div。
抱歉解决了这些问题，正在重写我的代码，不想复制/粘贴所有内容，因为它太大了。

标签： javascript html css iframe accordion

【解决方案1】：

HTML：

<button id='hideshow'>Link1</button>
<div class="panel">
  <iframe src="linkcodehere" class="content" style="border:0;display:none"></iframe>
  <br/>
  <p class="content" style="display:none;">some stuff</p>
  <p class="content" style="display:none;">more stuff</p>
</div>
<button id="hideshow2">Link2</button>
<div class="panel2">
  <iframe src="linkcodehere2" class="content2" style="border:0; display:none;"></iframe>
  <br/>
  <p class="content2" style="display:none;">some stuff</p>
  <p class="content2" style="display:none;">more stuff</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

JavaScript/JQuery：

$(document).ready(function(){
  $('#hideshow').on('click', function(event) {        
     $('.content').toggle('show');
  });
});
$(document).ready(function(){
  $('#hideshow2').on('click', function(event) {        
     $('.content2').toggle('show');
  });
});

工作示例： http://codepen.io/anon/pen/vxRxPm

【讨论】：

工作正常，但是我在类面板中有其他元素标签。我将如何让它显示它们？例如
stuff
Test1

Test2
我需要添加什么才能在单击按钮时显示 test1 和 test2，谢谢。
要在 div“面板”中显示/隐藏对象，请添加 CLASS“内容”和样式“display:none;”。
为什么没有 $？并且这些事件没有被使用，并且会在 linter 中引发错误。

【解决方案2】：

根据我的经验，手风琴几乎对于用户和开发人员来说总是一种令人不快的 UI 模式。

话虽如此，有很多方法可以做到这一点。这就是我的处理方式。

来自 OP 代码的注释：保持变量可读 + 如果您要使用 jQuery，请一直使用而不是使用一半一半。了解标准 API 或 jQuery 的一种，直到您同时了解两者。 :)

jsFiddle：https://jsfiddle.net/sheriffderek/tfy11sas/

标记

<ul class='accordian js-accordian'>

  <li class='item js-item' data-name='one'>
    <button>open me</button>
    <div class='content'>
      <p>This is some content. It could be an iFrame or whatever you want. - but you'll have to set the height for an iFrame.</p>
    </div>
  </li>

  <li class='item js-item' data-name='two'>
    <button>open me</button>
    <div class='content'>
      <p>This is some content. It could be an iFrame or whatever you want. - but you'll have to set the height for an iFrame.</p>
    </div>
  </li>

</ul>

脚本

$(document).ready(function() {
  var $accordian = $('.js-accordian');
  var $items = $('.js-item');

    // set even click on the whole accordian and then check for js-item
  // this way you pair down how much is being watched
  $accordian.on('click', '.js-item', function() {
    console.log( $(this).data('name') );
    // just to show data-attributes for fun

    $items.removeClass('open');
    $(this).addClass('open'); // the item you clicked...
  });
});

CSS

.accordian {
  list-style: none;
  margin: 0;
  padding: 0;
  background: black;
}

.accordian .item {
  background: lightgray;
}

.accordian .content {
  height: 0;
  overflow: hidden;
}

.accordian .content p {
  margin: 0;
  padding: .5rem;
  background: white;
}

.accordian .item.open .content {
  height: auto;
}

【讨论】：