为什么这种转变不起作用？ （jQuery toggle + css）

Question

切换课程时转换已经消失了吗？我也想添加HTML，但stackoverflow一直说我的问题主要是代码，不会让我保存，这就是为什么我添加了codepen链接，现在工作正常，我刚刚编辑过。

https://codepen.io/anon/pen/pdmpNE

    <div class="container">
  <div class="row">
    <div class="col bg-primary one">
      <h1>some text</h1>
    </div>
    <div class="col bg-danger two">
      <h1>hidden text</h1>
    </div>
  </div>
</div>

.two {
  visibility: hidden;
  display: none;
  opacity: 0;
  transition: all 1s ease-out;
}

.is-visible {
      display: block;
            visibility: visible;
            opacity: 1;
            transition: all 1s ease-out;
}

$('.row').click(function(){
    $(this).children('.two').toggleClass('is-visible');
});

Answer 1

我想我拼凑了你要找的东西，但请下次用所有代码格式化你的问题。另外，如果您要添加Codepen，请确保实际添加CSS和JS，如果您要添加一些。

我改变的是，我将你的.two类添加到你的第二个div中，并在文档准备就绪后制作你的$（​​'。row）.click（）函数。

这是HTML：

<div class="col bg-danger two">
  <h1>hidden text</h1>
</div>

这是JS：

$('document').ready(function() {
  $('.row').click(function(){
    $(this).children('.two').toggleClass('is-visible');
  });
});

Here's the Codepen displaying the changes.