javascript - 简单的 jQuery div 切换不起作用

Question

我是 JavaScript 的新手，我正在尝试创建一个简单的隐藏和显示 div 切换，但它不起作用。我不确定是什么问题——我最初有 div display:none，然后当点击 course-info-toggle 类时，它应该变成display:block 和 transition down.

有什么想法吗？

/* Toggle on course detail sections */
$(document).ready(function() {
  $('.course-info-toggle').click(function() {
    $('.toggle-content').toggleClass('.show');
  });
});

.toggle-content.show {
  display: block;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}

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

<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      </p>
  </div>
</div>

Answer 1

去掉toggleClass中的点

应该是

$('.toggle-content').toggleClass('show');

不像.toggleClass('.show')

您似乎想同时添加动画和过渡。使用关键帧制作动画。显示属性似乎不适用于过渡。

Css transition from display none to display block, navigation with subnav

Slide in from left CSS animation

解决方案:您可以将您的 css 类更改为此。现在，您可以通过不同的方式对其进行处理。

.toggle-content.show {
   visibility: visible;
     position: relative;
   opacity: 1;
     animation: leftSlide 2s forwards;
}

.toggle-content {
 opacity: 0;
  visibility: hidden;
  background-color: #eeeeee;
  transition: opacity 5s, visibility 2ms;
}

@keyframes leftSlide {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}

要让它向下滑动，可以使用translateY。