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

Posted 2023-03-05

【中文标题】不是我的 div 的内容似乎试图使用某些东西使它出现

【英文标题】：Not the content of my div appears to try to use something to make it appear

【发布时间】：2016-02-26 11:24:34

【问题描述】：

我正在使用一个函数来隐藏和显示一个 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>

【问题讨论】：

请提供一些代码以便我们为您提供帮助。

pastebin.com/jsUK7rk3

【参考方案1】：

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