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

Question

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

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(); 开头。 None 其中似乎对代码有任何影响。我不确定我是否正在寻找正确的区域，或者我是否做错了什么。

Answer 1

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

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

你原来尝试的问题...

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

... 是它正在设置一个名为 'onLoad' 的变量，其值是运行函数 control_panel.open() 返回的值，它立即执行等待页面加载完成。相反，在我的示例中，我在 window 上设置了一个 'onload' 侦听器，这样当 window 完成加载时，它将运行 control_panel.open() 它现在知道的函数。

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

How do I start with the tab expanded (toggle)?

html

javascript

css

togglebutton