What is a promise in Javascript?

Question

J. Mick

Asked: 2020-08-29 07:33:36 +0800 CST 2020-08-29 07:33:36 +0800 CST 2020-08-29 07:33:36 +0800 CST

如何适应扩展/手风琴并添加新效果 - jQuery？

772

我有链接列表，在Risa__B的帮助下调整了 100% 响应视频的索引。

在我之前的问题中，调整它是一个大问题，即使它只是对样式进行了一些小改动css

我不希望响应式适应迷失并回到同样的老问题，但这不是这个目的的问题。

在视频列表中，我希望能够添加一个展开来显示和隐藏内容，如第 1 节中的图像所示，并添加相同的效果，可以说，通过为每个视频添加描述，即视频包含说明时激活箭头，如果没有说明，则不显示箭头。

例子：

如何将图像示例的相同功能添加到我的视频列表中？

.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover{
  background:#f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items:center;
  /*justify-content:space-between;*/
}

.play { 
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width:60%;
  white-space: normal !important;
}

.view-preview,.length {
  color: #000;
  text-align:center;
}

.view-preview{
  width:23%;
}

.length {
  width:10%;
}

<div class="chapters">
  <ul class="view">
   <li>
   <a class="rows" href="video.mp4">
   <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
   <div class="video-title">audio video audio video audio video</div>
   <div class="view-preview">&nbsp;Vista Previa</div>
   <div class="length">&nbsp;02:34</div>
   </a>
   </li>
   <li>
   <a class="rows" href="video2.mp4">
   <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
   <div class="video-title">audio video audio video audio video</div>
   <div class="view-preview">&nbsp;Vista Previa</div>
   <div class="length">&nbsp;02:34</div>
   </a>
   </li>
 </ul>
</div>

3 Answers

Voted

Alvarez · Answer 1 · 2020-08-31T22:47:04+08:00

好吧，这一次，如果我希望它是您所需要的，我设法获得了一个更简单的 Jquey 函数，尽情享受吧：jquery 什么检查它是否是一个孩子，如果是，它会显示它。而css只是造型。

问候。

$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
  } else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});

.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover {
  background: #f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items: center;
  /*justify-content:space-between;*/
}

.play {
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width: 60%;
  white-space: normal !important;
}

.view-preview,
.length {
  color: #000;
  text-align: center;
}

.view-preview {
  width: 23%;
}

.length {
  width: 10%;
}

@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  font-size: 1.1em;
  margin: 1em 0;
}

.description {
  margin: 1em auto 2.25em;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  /*display: block;*/
}

ul li {
  margin: .5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.label:empty {
  display: none;
}

span {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Clasicas</a>
    <ul class="inner">
      <div class="chapters">
        <ul class="view">
          <li>
            <a class="rows" href="video.mp4">
              <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
              <div class="video-title">audio video audio video audio video</div>
              <div class="view-preview">&nbsp;Vista Previa</div>
              <div class="length">&nbsp;02:34</div>
              <a href="javascript:void(0);"></a><span class="toggle label label-danger ">+</span>
              <ul class="inner">
                <li>Detalles del video</li>
              </ul>
            </a>
          </li>
          </a>
  </li>

  <li>
    <a class="rows" href="video2.mp4">
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
      <div class="video-title">audio video audio video audio video</div>
      <div class="view-preview">&nbsp;Vista Previa</div>
      <div class="length">&nbsp;02:34</div>
    </a>
  </li>
  </ul>
  </div>
  </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Rancheras</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Banda</a>
        <div class="inner">
          <div class="chapters">
            <ul class="view">
              <li>
                <a class="rows" href="video.mp4">
                  <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                  <div class="video-title">audio video audio video audio video</div>
                  <div class="view-preview">&nbsp;Vista Previa</div>
                  <div class="length">&nbsp;02:34</div>
                  <a href="javascript:void(0);"></a><span class="toggle label label-danger ">+</span>
                  <ul class="inner">
                    <li>Detalles del video</li>
                  </ul>
                </a>
              </li>
              </a>
      </li>

      <li>
        <a class="rows" href="video2.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video</div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
      </ul>
      </div>
      </div>
  </li>

  <li>Option 3</li>
  </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Romanticas</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Técnicamente cualquier número de elementos anidados</a>
        <ul class="inner">
          <div class="chapters">
            <ul class="view">
              <li>
                <a class="rows" href="video.mp4">
                  <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                  <div class="video-title">audio video audio video audio video</div>
                  <div class="view-preview">&nbsp;Vista Previa</div>
                  <div class="length">&nbsp;02:34</div>
                  <a href="javascript:void(0);"></a><span class="toggle label label-danger ">+</span>
                  <ul class="inner">
                    <li>Detalles del video</li>
                  </ul>
                </a>
              </li>
              </a>
      </li>

      <li>
        <a class="rows" href="video2.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video</div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
      </ul>
      </div>
      </ul>
  </li>

  <li>Option 2</li>

  <li>Option 3</li>
  </ul>
  </li>
</ul>

Alvarez · Answer 2 · 2020-09-01T20:51:26+08:00

如果您之前共享过该链接，一切都会变得更容易。

我认为它不需要解释，因为它们在上面，Css中只有一些变化，当我们点击显示更多细节时。

享受它，来自洪都拉斯的问候。

$('.accordion').click(function(e) {
  e.preventDefault();
  var $this = $(this);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.removeClass("active");
    $this.next().slideUp(350);
  } else {
    $this.addClass("active");

    $this.parent().parent().find('.panel').removeClass('show');
    $this.parent().parent().find('.panel').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});


$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.removeClass("active");

    $this.next().slideUp(350);
  } else {
    $this.addClass("active");

    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  font-size: 1.1em;
  margin: 1em 0;
}

.description {
  margin: 1em auto 2.25em;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  /*display: block;*/
}

ul li {
  margin: .5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.toggle:after {
  content: '\002B';
}

.toggle.active:after {
  content: "\2212";
}

.label:empty {
  display: none;
}

span {
  cursor: pointer;
}

.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover {
  background: #f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items: center;
  /*justify-content:space-between;*/
}

.play {
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width: 60%;
  white-space: normal !important;
}

.view-preview,
.length {
  color: #000;
  text-align: center;
}

.view-preview {
  width: 23%;
}

.length {
  width: 10%;
}

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2212";
}

div.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: none;
}

.toogle {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Me acabo de tomar Dos Cervezas haciendo esto</h2>
<h2>Me debes dos cervezas y los puntos de recompensa</h2>

<button class="accordion">Cervezas</button>
<div class="panel">
  <div class="chapters">
    <ul class="view">
      <li>
        <a class="rows" href="video.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video<span class="toggle"> </span>
            <ul class="inner">
              <li>Detalles del video</li>
            </ul>
          </div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
      <li>
        <a class="rows" href="video2.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video</div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
    </ul>
  </div>
</div>

<button class="accordion">Ahora Vodka</button>
<div class="panel">
  <div class="chapters">
    <ul class="view">
      <li>
        <a class="rows" href="video.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video<span class="toggle"> </span>
            <ul class="inner">
              <li>Detalles del video</li>
            </ul>
          </div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
      <li>
        <a class="rows" href="video2.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video</div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
    </ul>
  </div>
</div>

<button class="accordion">Para terminar Ron Zacapa</button>
<div class="panel">
  <div class="chapters">
    <ul class="view">
      <li>
        <a class="rows" href="video.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video<span class="toggle"> </span>
            <ul class="inner">
              <li>Detalles del video</li>
            </ul>
          </div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
      <li>
        <a class="rows" href="video2.mp4">
          <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
          <div class="video-title">audio video audio video audio video</div>
          <div class="view-preview">&nbsp;Vista Previa</div>
          <div class="length">&nbsp;02:34</div>
        </a>
      </li>
    </ul>
  </div>
</div>

Alvarez · Answer 3 · 2020-08-31T14:28:47+08:00

这只是您需要编写的所有代码的一个示例。您可以探索它，它具有引导设计，并且 css 在外部链接中

<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/course-landing-page/desktop/hb.6e1c07383f3a2a838d7c2eb9668cb7f1.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/entry-main.314642c6da280521a2420a4b39ddf9fa.css" rel="stylesheet" />
<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/entry-main.314642c6da280521a2420a4b39ddf9fa.css" rel="stylesheet" />
<div class="col-xxs-8 left-col">
  <div class="clp-component-render">

    <div user-tracker-in-viewport="" data-user-tracker-page="clp" data-user-tracker-schema="clp-activity">
      <div data-user-tracker-object-id="957106" data-user-tracker-action="seen-curriculum">
      </div>
    </div>

    <div class="curriculum-wrapper" data-purpose="course-curriculum" curriculum-loader="" data-course-id="957106" data-course-preview-path="/957106/preview/" data-num-displayed-items="10" data-has-more-to-load="1">

      <span id="curriculum" class="in-page-offset-anchor" style="top: -88px;"></span>

      <div class="curriculum-header-container">
        <div class="header-left">
          <div class="curriculum-header-title">

            Programa de este curso

          </div>
        </div>

        <div class="header-right">
          <span class="js-toggle-all">
                        
                            <div class="collapsed-text">
                                <a class="sections-toggle" user-tracker-click="" data-user-tracker-schema="action-logs" data-user-tracker-object-id="957106" data-user-tracker-action="full-curriculum-read" data-user-tracker-user-id="">
                                    Ampliar todo
                                </a>
                            </div>
                            <div class="expanded-text">
                                <a class="sections-toggle">
                                    Contraer todo
                                </a>
                            </div>
                            <div class="num-lectures">
                                274 clases
                            </div>
                        
                    </span>
          <span class="curriculum-header-length">
                        40:14:12
                    </span>
        </div>

      </div>


      <div class="content-container">
        <div class="section-container" data-toggle="collapse" data-target=".lecture-957106-1">
          <div class="section-header-left">
            <span class="lecture-title">
                            <div class="lecture-title-toggle-wrapper">
                                <span class="lecture-title-toggle js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">
                                    <span class="lecture-title-toggle-plus">+</span>
            <span class="lecture-title-toggle-minus">–</span>
            </span>
          </div>
          <span class="lecture-title-text">Introducción</span>
          </span>
        </div>
        <div class="section-header-right">
          <span class="num-sections js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">
                            
                                2 clases
                            
                        </span>
          <span class="section-header-length">
                            05:58
                        </span>
        </div>
      </div>
      <div class="lectures-container js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">

        <div class="lecture-container  lecture-container--preview " data-purpose="lecture-item-1-1">
          <div class="left-content">
            <span class="udi udi-play-circle"></span>
            <div class="top">

              <div class="description collapse description-957106-1-1">
                <p>Introducción al curso de Desarrollo de Aplicaciones y Juegos para Android con una visión global del contenido&nbsp;</p>
              </div>

              <div class="title">

                <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7072582" data-course-id="957106" data-lecture-id="5722726" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview">
                                                Introducción
                                            </a>


                <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-1-1" data-purpose="lecture-caret-1-1"></i>

              </div>
            </div>
          </div>

          <div class="details">

            <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7072582" data-course-id="957106" data-lecture-id="5722726" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview"
              data-purpose="preview-course">
              <span class="preview-text">Vista previa</span>
            </a>

            <span class="content-summary">
                                    02:20
                                </span>
          </div>
        </div>

        <hr>


        <div class="lecture-container " data-purpose="lecture-item-1-2">
          <div class="left-content">
            <span class="udi udi-play-circle"></span>
            <div class="top">

              <div class="description collapse description-957106-1-2">
                <p>Aquí te explicaré como está estructurado el curso, qué temas tratará cada tutor y cómo beneficiarte plenamente de todo el material que se ha preparado para ti</p>
              </div>

              <div class="title">

                Como seguir este curso


                <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-1-2" data-purpose="lecture-caret-1-2"></i>

              </div>
            </div>
          </div>

          <div class="details">

            <span class="content-summary">
                                    03:38
                                </span>
          </div>
        </div>


      </div>
    </div>

    <div class="content-container">
      <div class="section-container" data-toggle="collapse" data-target=".lecture-957106-2">
        <div class="section-header-left">
          <span class="lecture-title">
                            <div class="lecture-title-toggle-wrapper">
                                <span class="lecture-title-toggle js-curriculum-collapse collapse lecture-957106-2 ">
                                    <span class="lecture-title-toggle-plus">+</span>
          <span class="lecture-title-toggle-minus">–</span>
          </span>
        </div>
        <span class="lecture-title-text">Introducción a Java</span>
        </span>
      </div>
      <div class="section-header-right">
        <span class="num-sections js-curriculum-collapse collapse lecture-957106-2 ">
                            
                                15 clases
                            
                        </span>
        <span class="section-header-length">
                            02:19:20
                        </span>
      </div>
    </div>
    <div class="lectures-container collapse js-curriculum-collapse lecture-957106-2 ">

      <div class="lecture-container " data-purpose="lecture-item-2-1">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-1">
              <p>Aprender java puede ser fácil y divertido. Con este tutorial te introducirás en la programación en Java.</p>
              <p><br></p>
              <p><br></p>
            </div>

            <div class="title">

              Introducción a Java


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-1" data-purpose="lecture-caret-2-1"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    04:24
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-2">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-2">
              <p>Normas de sintaxis que debes cumplir en Java para que tu código pueda ejecutarse</p>
            </div>

            <div class="title">

              Sintaxis en Java


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-2" data-purpose="lecture-caret-2-2"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    06:07
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container  lecture-container--preview " data-purpose="lecture-item-2-3">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-3">En este video veras ejemplos de las variables mas basicas de Java para los tipos de datos más usados</div>

            <div class="title">

              <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7066256" data-course-id="957106" data-lecture-id="5944750" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview">
                                                Variables
                                            </a>


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-3" data-purpose="lecture-caret-2-3"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7066256" data-course-id="957106" data-lecture-id="5944750" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview"
            data-purpose="preview-course">
            <span class="preview-text">Vista previa</span>
          </a>

          <span class="content-summary">
                                    13:04
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-4">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-4">
              <p>En este video verás como declarar arrays y hacer uso de ellos a través del índice</p>
            </div>

            <div class="title">

              Arrays


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-4" data-purpose="lecture-caret-2-4"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    08:40
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-5">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-5">
              <p>En este video verás como crear una matriz y acceder a cada una de las posiciones de ésta</p>
            </div>

            <div class="title">

              Matrices


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-5" data-purpose="lecture-caret-2-5"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    07:34
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-6">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-6">
              <p>En este video veras como funciona el condicional if - else, ademas de la explicación de operadores de comparación</p>
            </div>

            <div class="title">

              if y operadores de comparación


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-6" data-purpose="lecture-caret-2-6"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    11:57
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-7">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-7">
              <p>En este video veremos operadores de calculo y sus abreviaturas para trabajar con los datos de las variables</p>
            </div>

            <div class="title">

              Operadores de cálculos


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-7" data-purpose="lecture-caret-2-7"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    08:43
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-8">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-8">
              <p>En este video veras&nbsp;operadores booleanos and y or</p>
            </div>

            <div class="title">

              Operadores lógicos


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-8" data-purpose="lecture-caret-2-8"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    12:12
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-9">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-9">En este video verás como usar Switch con case, default y break</div>

            <div class="title">

              Switch


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-9" data-purpose="lecture-caret-2-9"></i>

            </div>
          </div>
        </div>

        <div class="details">

如何适应扩展/手风琴并添加新效果 - jQuery？

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?