JQuery Щелкните первый элемент и переключите другой класс - PullRequest
Новая
       4

JQuery Щелкните первый элемент и переключите другой класс

3 голосов
/ 08 февраля 2020

Я хочу щелкнуть первый элемент («title1») и переключить содержимое рядом с другим классом.

Может кто-нибудь сказать мне, что мне делать? Большое спасибо.

(Мой английский sh не очень хорош, пожалуйста, не против.)

Это мой html: 

<ul>
  <li class="title1"></li>
  <li class="content"></li>
</ul>
<ul>
  <li class="title1"></li>
  <li class="content"></li>
</ul>
 <ul>
  <li class="title1"><</li>
  <li class="content"></li>
</ul>

js: 

 $(".title1").eq(0).click(function() {
     $(".title1").not(':eq(0)').next(".content").toggle();
 });

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

Я думаю, вы хотите что-то вроде этого: 

$(".content").toggle();
$(".title1").click(function() {
 $(this).next().toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="title1">title1</li>
  <li class="content">content</li>
</ul>
<ul>
  <li class="title1">title2</li>
  <li class="content">content</li>
</ul>
 <ul>
  <li class="title1">title3</li>
  <li class="content">content</li>
</ul>

Если ваши элементы li содержат несколько имен классов, то это лучший способ: 

$(".content").toggle();
$("li").click(function(){
$(this).attr("class").split(" ").map((c)=>{ // separate each class name
 /title\d+/.test(c) ? $("."+c).next().toggle() : {}; //check for class names like title1,title(n) if exist then expand next content
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="title1 b">title1</li>
  <li class="content">content</li>
</ul>
<ul>
  <li class="title1">title1</li>
  <li class="content">content</li>
</ul>
<ul>
  <li class="title1 e">title1</li>
  <li class="content">content</li>
</ul>
<ul>
  <li class="title2">title2</li>
  <li class="content">content</li>
</ul>
 <ul>
  <li class="title2">title2</li>
  <li class="content otherclassname">content</li>
</ul>
0 голосов
/ 08 февраля 2020

Вы можете достичь этого таким образом. 

$(".title1, .title2").click(function() {
     var className = $(this).attr("class");
     $("." + className).next().toggle();
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="title1">title1</li>
  <li class="content">content</li>
</ul>
<ul>
  <li class="title2">title2</li>
  <li class="content">content</li>
</ul>
 <ul>
  <li class="title2">title2</li>
  <li class="content">content</li>
</ul>
...