Question

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

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();开头。这些似乎都没有对代码产生任何影响。我不确定我是在寻找正确的区域还是我做错了什么。

Answer 1

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

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

原始尝试的问题......

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

...是它设置了一个名为＆＃39; onLoad＆＃39;的变量。通过运行函数control_panel.open（）返回的值的值，它立即执行，而不是等到页面加载。相反，在我的例子中，我设置了一个＆＃39; onload＆＃39;窗口上的监听器，这样当窗口完成加载时，它就会运行它现在知道的control_panel.open（）函数。

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

1 个答案: