如何从展开（切换）选项卡开始？答案

【问题标题】：How do I start with the tab expanded (toggle)?如何从展开（切换）选项卡开始？
【发布时间】：2015-08-26 02:37:01
【问题描述】：

所以我正在修改一个网页，页面底部有一个表格，开始最小化。当您单击箭头时，它会向上打开以显示表格。我正在尝试对其进行修改，以便在页面加载时它已经开始打开。

HTML 片段：

<div class="row" id="cp-toggle">
    <div class="col-sm-12">
      <div class="col-sm-2 col-sm-offset-5 toggle-button">
        <a><span class="glyphicon glyphicon-chevron-up"></span></a>
      </div>
      <div class="col-sm-12" style="height: calc(100% - 25px);max-height: 250px;background-color:#d3d3d3;">
        <div style="height: 100%;max-height: 250px;">
          <div style="height: 25px;padding-top: 4px;">
            <div style="float: left;padding-right: 9px;">
              <span> Posts: </span> <span id="posts_count"></span>
            </div>
          </div>
          <div style="overflow-y: scroll;height: 100%;max-height: 225px;">
            <table id="result_table" class="table" style="display:table;" >
              <thead class="result_thead"></thead>
              <tbody class="result_tbody"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

Javascript：

var control_panel= (function(){
  var container = $('#cp-toggle div:first-child');
  var btn = $('#cp-toggle div:first-child').find("div").first();
  var table_panel = $('#cp-toggle div:first-child div:nth-child(2)').first();
  var open_css = "glyphicon-chevron-up";
  var close_css = "glyphicon-chevron-down";
  var open = function(){
    container.find("span").first().switchClass(open_css, close_css);
    var h = table_panel.height() + 25;
    container.css("top", "calc(100% - "+ h +"px)");
  };
  var close = function(){
    container.find("span").first().switchClass(close_css, open_css);
    container.css("top", "calc(100% - 25px)")
  };

  var isOpen = function(){
    return _.contains(container.find("span").first().attr('class').split(/\s+/), close_css);
  };

  var toggle = function(){
    if (isOpen()){
      close();
    } else {
      open();
    }
  };

  btn.on('click', toggle);

  return {
    open: open,
    close: close,
    toggle: toggle,
    isOpen : isOpen
  };
}());

CSS 片段：

#cp-toggle > div:first-child {
    top: calc(100% - 25px);
    position: fixed;
    z-index: 25;
}

.toggle-button {
    height: 25px;
    padding-top: 3px;
    background-color: #d3d3d3;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    text-align: center;
    cursor: pointer;
}

#cp-toggle a {
    color: #111;
}

#cp-toggle a:hover {
    color: #777;
}
.tab-pane { height: 100%;}
#email-body { height: calc(100% - 80px); }
.body-view { height: 100%; overflow-y: scroll; }

.marked {
    color: #ffd700;
}
.marked:hover {
    color: #ffd700;
}

我已尝试修改 javascript 以在最后调用 control_panel.open();。我尝试将toggle 更改为以open(); 开头。这些似乎都对代码没有任何影响。我不确定我是否在寻找正确的区域，或者我做错了什么。

【问题讨论】：

快速而肮脏的解决方案可能是将onLoad="control_panel.open()" 添加到您的html 的body 元素中。在调用 open 之前应该加载整个文档。
@flup 我试图将<script>onLoad=control_panel.open();</script> 添加到<body> 的开头和结尾，但它看起来没有任何作用。 @kittykittybangbang 我添加了我认为相关的 CSS。
@Joey 不，您需要在 body 元素中添加 onLoad 属性。所以<body onLoad="control_panel.open()">

标签： javascript html css togglebutton

【解决方案1】：

试试这个（你在评论中尝试过类似的东西，但我会在一分钟内解释......）：

<script>
    window.addEventListener('load', function() {
        control_panel.open();
    });
</script>

您最初尝试的问题...

<script>onLoad=control_panel.open();</script>

... 是它设置了一个名为“onLoad”的变量，其值是通过运行函数 control_panel.open() 返回的值，它立即执行此操作，而不是等到页面加载完毕。相反，在我的示例中，我在窗口上设置了一个“onload”侦听器，这样当窗口完成加载时，它将运行它现在知道的 control_panel.open() 函数。

【讨论】：

啊啊啊。这很有意义。谢谢。完美运行。