我想单击第一个项目(“title1”),然后切换另一个同一类旁边的内容。
谁能告诉我我该怎么办?非常感谢。
(我的英语不是很好,请不要介意。)
这是我的 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();
});
最佳答案
我想你想要这样的东西:
$(".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>
关于JQuery 单击第一个项目和另一个同类切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60126089/