不是我的 div 的内容似乎试图使用某些东西使它出现

Question

我正在使用一个函数来隐藏和显示一个 HTML 元素，当我正常启动我的网络时，隐藏的 div 就会出现。但是当我给一个显示时间轴的按钮没有出现时，我放的标题只出现了div

我正在使用时间线，但我想要的没有出现，但如果是使用 display: 'none'; CSS 或者因为，如果你不必替换其他属性或者我可以这样做

function mostrarLineaTiempo() {
  $("#lineaDelTiempo").css("display", "block");
}

function ocultarLineaTiempo() {
  $("#lineaDelTiempo").css("display", "none");
}

div.timeline-frame {
  -moz-box-sizing: border-box;
  border: 1px solid #bebebe;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
div.timeline-content {
  overflow: hidden;
  position: relative;
}
div.timeline-axis {
  -moz-box-sizing: border-box;
  border-color: #bebebe;
  border-top-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
div.timeline-axis-grid {
  -moz-box-sizing: border-box;
  border-left-style: solid;
  border-width: 1px;
  box-sizing: border-box;
}
div.timeline-axis-grid-minor {
  border-color: #e5e5e5;
}
div.timeline-axis-grid-major {
  border-color: #bfbfbf;
}
div.timeline-axis-text {
  color: #4d4d4d;
  padding: 3px;
  white-space: nowrap;
}
div.timeline-axis-text-minor {} div.timeline-axis-text-major {} div.timeline-event {
  -moz-box-sizing: border-box;
  background-color: #d5ddf6;
  border-color: #97b0f8;
  box-sizing: border-box;
  color: #1a1a1a;
  display: inline-block;
}
div.timeline-event-selected {
  background-color: #fff785;
  border-color: #ffc200;
  z-index: 999;
}
/* TODO: use another color or pattern? */

div.timeline-event-cluster {
  background: url('img/cluster_bg.png') #97b0f8;
  color: #ffffff;
}
div.timeline-event-cluster div.timeline-event-dot {
  border-color: #d5ddf6;
}
div.timeline-event-box {
  -moz-border-radius: 5px;
  /* For Firefox 3.6 and older */
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
}
div.timeline-event-dot {
  -moz-border-radius: 5px;
  /* For Firefox 3.6 and older */
  border-radius: 5px;
  border-style: solid;
  border-width: 5px;
}
div.timeline-event-range {
  -moz-border-radius: 2px;
  /* For Firefox 3.6 and older */
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
}
div.timeline-event-range-drag-left {
  cursor: w-resize;
  z-index: 1000;
}
div.timeline-event-range-drag-right {
  cursor: e-resize;
  z-index: 1000;
}
div.timeline-event-line {
  -moz-box-sizing: border-box;
  border-left-style: solid;
  border-left-width: 1px;
  box-sizing: border-box;
}
div.timeline-event-content {
  margin: 5px;
  overflow: hidden;
  white-space: nowrap;
}
div.timeline-groups-axis {
  -moz-box-sizing: border-box;
  border-color: #bebebe;
  border-width: 1px;
  box-sizing: border-box;
}
div.timeline-groups-axis-onleft {
  border-style: none solid none none;
}
div.timeline-groups-axis-onright {
  border-style: none none none solid;
}
div.timeline-groups-text {
  color: #4d4d4d;
  padding-left: 10px;
  padding-right: 10px;
}
div.timeline-currenttime {
  -moz-box-sizing: border-box;
  background-color: #ff7f6e;
  box-sizing: border-box;
  width: 2px;
}
div.timeline-customtime {
  -moz-box-sizing: border-box;
  background-color: #6e94ff;
  box-sizing: border-box;
  cursor: move;
  width: 2px;
}
div.timeline-navigation {
  -moz-border-radius: 2px;
  /* For Firefox 3.6 and older */
  -moz-box-sizing: border-box;
  background-color: #f5f5f5;
  border: 1px solid #bebebe;
  border-radius: 2px;
  box-sizing: border-box;
  color: #808080;
  font-family: arial;
  font-size: 20px;
  font-weight: bold;
}
div.timeline-navigation-new,
div.timeline-navigation-delete,
div.timeline-navigation-zoom-in,
div.timeline-navigation-zoom-out,
div.timeline-navigation-move-left,
div.timeline-navigation-move-right {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  float: left;
  height: 36px;
  padding: 10px;
  text-decoration: none;
  width: 36px;
}
div.timeline-navigation-new {
  background: url('img/16/new.png') no-repeat center;
}
/* separator between new and navigation buttons */

div.timeline-navigation-new-line {
  border-right: 1px solid #bebebe;
}
div.timeline-navigation-delete {
  background: url('img/16/delete.png') no-repeat center;
}
div.timeline-navigation-zoom-in {
  background: url('img/16/zoomin.png') no-repeat center;
}
div.timeline-navigation-zoom-out {
  background: url('img/16/zoomout.png') no-repeat center;
}
div.timeline-navigation-move-left {
  background: url('img/16/moveleft.png') no-repeat center;
}
div.timeline-navigation-move-right {
  background: url('img/16/moveright.png') no-repeat center;
}
small {
  font-size: 8px;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Poetas Poblanos</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Linea del Tiempo -->
  <link rel="stylesheet" href="css/timeline.css">
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script src="js/timeline-min.js"></script>
  <script src="js/lineaTiempo.js"></script>

  <!-- Juego -->
  <script src="phaser.min.js"></script>
  <script src="juego/main.js"></script>

</head>

<body>
  <div class="col-md-2">
    <p></p>
  </div>

  <div class="col-md-8">
    <div id="LineaDelTiempoDiv">
      <h3 class="text-center">Linea del Tiempo</h3>

      <div id="LineaTiempo"></div>
    </div>

    <div class="poema">
      <div class="col-md-12">
        <h3>Ánalisis de Poema</h3>
        <!-- Poema -->
        <div class="col-md-6">
          <h4>Poema</h4>
        </div>

        <!-- Tabla de ritmo -->

        <h1 class="text-center">Poetas Poblanos</h1>

        <hr>

        <div id="juegoDiv" class="center-block" style="padding-left: 30px;"></div>
      </div>

      <div class="col-md-2">
        <p></p>
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
</body>

Answer 1

我认为此代码的问题是您通过 js 将 css 属性应用于 DOM 中不存在的 div 在控制台中尝试 $("#lineaDelTiempo") 您将获得零 DOM 对象而不是 $("#LineaDelTiempoDiv") 您的 js 有拼写错误并且您没有提供必要的 js 文件，这些文件将调用 js 函数。所以请用这个细节更新问题