Question

我基本上是在“面板”类中添加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';
            }
        }
    }
});

当我查看我的控制台日志时出现此错误：未捕获的TypeError：无法读取未定义的属性“样式”

Answer 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

Answer 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;
}

手风琴：隐藏/显示iframe onclick

2 个答案:

标记

脚本

CSS