代码之家 › 专栏 › 技术社区 › Husna

使用jquery切换当前类

css3 html5 jquery javascript

1

Husna · 技术社区 · 6 年前

我想切换 .title 当我们点击时。标题 .content 类切换。这里我在里面写了这些类。我想成为切换。当前类中的标题。我试过了,但没有得到。有人能告诉我这里可能有什么问题吗?

$(document).ready(function() {
  $('.title').click(function() {
    $(this).find('.content').slideToggle();
  });
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ol class="list-timeline">
    <li>
      <h3 class="title">The Establishment</h3>
      <div class="content">
        <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p>
      </div>
    </li>
    <li>
      <h3 class="title">150 Employee</h3>
      <div class="content">
        <p>Pellentesque habitant morbi tristique senectus.</p>
      </div>
    </li>
  </ol>
</div>

5 回复 | 直到 6 年前

1

4b0 Agit 6 年前

使用 parent 寻找课堂 content 。

$(document).ready(function() {
  $('.title').click(function() {
    $(this).parent().find('.content').slideToggle();
  });
});

.content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ol class="list-timeline">
    <li>
      <h3 class="title">The Establishment</h3>
      <div class="content">
        <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p>
      </div>
    </li>
    <li>
      <h3 class="title">150 Employee</h3>
      <div class="content">
        <p>Pellentesque habitant morbi tristique senectus.</p>
      </div>
    </li>
  </ol>
</div>

替代方法使用 next :

$(document).ready(function() {
  $('.title').click(function() {
    $(this).next('div').slideToggle();
  });
});

内容{
显示:无;
}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<div class=“container”>
<ol class=“List Timeline”>
L>
<h3 class=“title”>建立</h3>
<DIV class=“content”>
<P>红腹蛇。Suspendise Pellentesque Convallis Massa.</p>
和;
&L./L>
L>
<h3 class=“title”>150名员工</h3>
<DIV class=“content”>
<P>Pellentesque Habitant Morbi Tristique Senectus.</P>
和;
&L./L>
& lt;/OL & gt;
和;

2

Gezzasa 6 年前

$(this).find 将查找该元素内的内容。 $(this).parent().find 将查找元素父级中的内容

$(this).parent().find('.content').slideToggle();

3

1

Rohit Verma 6 年前

在标题标签中找到了您,但首先应选择父级,然后找到要选择的父级。

我想你想要这样:

$(document).ready(function() {
  $('body').on('click','.title', function() {
    $(this).parent('li').find('.content').slideToggle();
  });
});

.content {
	display:none;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="container">
  <ol class="list-timeline">
    <li>
      <h3 class="title">The Establishment</h3>
      <div class="content">
        <p>Ascetur ridiculus mus. Suspendisse pellentesque convallis massa.</p>
      </div>
    </li>
    <li>
      <h3 class="title">150 Employee</h3>
      <div class="content">
        <p>Pellentesque habitant morbi tristique senectus.</p>
      </div>
    </li>
  </ol>
</div>

4

0

M Usman Nadeem 6 年前

你可以做到这一点

if($('...').hasClass('content')) {
    $('...').addClass('title').removeClass('content');    
}

if($('...').hasClass('title')) {
    $('...').addClass('content').removeClass('title');    
}

5

0

Akrion 6 年前

您也可以使用 siblings 作为

$(document).ready(function() {
  $('.title').click(function(e) {
    $(this).siblings('.content').slideToggle();
  });
});

而不是向上爬。 next 也是前面提到的一个选项。