简单的jQuery div切换不起作用

Question

我是JavaScript的新手,我正在尝试创建一个简单的隐藏并显示div切换,尽管它不起作用.我不确定问题是什么 - 我最初有div display:none,然后当course-info-toggle点击类时,它应该转向display:block,然后transition向下.

有任何想法吗？

/* 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从显示无转换到显示块,使用subnav导航

从左侧CSS动画中滑入

解决方案:您可以将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.