Question

当我点击“更多信息”时，它会更改为“更少信息”，但下面的内容不会滑动切换。

$(document).ready(function() {
  $(".content").hide();
  $(".toggle").on("click", function() {
    var txt = $(".content").is(':visible') ? 'More Information' : 'Less Information';
    $(".toggle").text(txt);
    $(".toggle").toggleClass('active');
    $(this).next('.content').slideToggle(450);
    e.stopPropagation();
  });
});

编辑：在小提琴中加入相关的html

<div class="description">

  <div class="descriptionTitle">
    <p class="Title"> KITAI / SELF-DIAGNOSIS </p>
    <p class="toggle">More Information</p>
  </div>

  <div class="content">
    content here
  </div>
</div>

Answer 1

$(this).next找不到.content，因为它不是兄弟姐妹。

.next仅查找具有相同父级（兄弟姐妹）的元素。

尝试：

$(this).closest(".descriptionTitle").next('.content').slideToggle(450);

或重新排列您的HTML

Answer 2

https://jsfiddle.net/officert/h7w40494/

$(document).ready(function() {
  $(".content").hide();
  $(".toggle").on("click", function() {
    var txt = $(".content").is(':visible') ? 'More Information' : 'Less   Information';
  $(".toggle").text(txt);
  $(".toggle").toggleClass('active');
  $('.content').slideToggle(450); //this was the problem
  e.stopPropagation();
});

你在做什么$(this).next('.content').slideToggle(450); 是问题。在这种情况下，$（this）.next（'。content'）表示使用类.content获取同级元素，但.content的元素不是兄弟。

Answer 3

$(this).next('.content').slideToggle(450);

该元素没有content类的下一个元素，但它的父元素有，So：

$(document).ready(function() {
  $(".content").hide();
  $(".toggle").on("click", function(e) {
    e.stopPropagation();
    var txt = $(".content").is(':visible') ? 'More Information' : 'Less Information';
    $(".toggle").text(txt);
    $(".toggle").toggleClass('active');

    $(this).parent().next('.content').slideToggle(450);
  });
});

https://jsfiddle.net/n1gLn63y/2/

Jquery幻灯片切换不显示点击内容

3 个答案: