Question

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

有什么想法吗？

＆＃13;

transition

＆＃13;

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

＆＃13;

.toggle-content.show {
  display: block;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}

＆＃13;

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。

Answer 2

您需要将.show更改为仅show＆amp;将!important添加到display:block

＆＃13;

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

＆＃13;

.toggle-content.show {
  display: block !important;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}

＆＃13;

<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>

＆＃13;

Answer 3

更改此行

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

到行

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

Answer 4

它正在按预期工作，除非我弄错了，这不是一个错字

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

你不应该使用＆＃39; .show＆＃39;它应该是

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

您不必根据docs使用.class名称。如果你这样做，它可以正常工作。

你可以查看小提琴here。除了上面提到的那个之外，没有做任何改变。

Answer 5

＆＃13;

$(document).ready(function() {
	$('.course-info-toggle').click(function() {
		$('.toggle-content').toggleClass('show');
	});
});

＆＃13;

.toggle-content.show {
	display: block;
    transition: left 0.3s linear;
}

.toggle-content {
	display: none;
	background-color: #eeeeee;
	padding: 1rem;
	margin-right:1rem;
}

＆＃13;

<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>

＆＃13;

Answer 6

toggleClass接受一个字符串，请使用以下内容：

.toggleClass('show');

Answer 7

/* Toggle on course detail sections */
$('.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>

简单的jQuery div切换不起作用

7 个答案: