所以我有两个无序列表,其中包含相同数量的项目。因此,让我们假设无序列表#2中的项都是隐藏的。使它们出现的唯一方法是单击无序列表#1中的项目。
所以基本上
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
现在,我尝试完成此操作的方式是使用index()
方法,但我不确定如何正确处理此代码。
这就是我想到的。
$('.list1').on('click', 'li', function() {
$('.list2 li').index($(this).index()).toggleClass('active');
});
所以,当您点击.list1
中的订单项时,无论该订单项的索引是什么,我想要在.list2
我遇到的问题是,当我登录它时,我得到了奇怪的索引号。第一个订单项将显示为2而不是0,第二个订单项的索引将显示为-1。
我做错了什么?很多我确定。先谢谢你们!
答案 0 :(得分:5)
Jquery .index()
返回所选元素的索引。您需要使用:eq()
选择器或.eq()
方法来选择带索引的元素。
$('.list1').on('click', 'li', function() {
$('.list2 li').eq($(this).index()).toggleClass('active');
});
&#13;
.hide { display: none; }
.active { display: block; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li class="hide">item 1</li>
<li class="hide">item 2</li>
<li class="hide">item 3</li>
<li class="hide">item 4</li>
</ul>
&#13;
答案 1 :(得分:3)
试试这个,这对你很有用
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
/* in here we get the ul which the class name is list2 and get the li elements inside it and hide those first*/
ul.list2 li{
display: none;
}
</style>
<body>
<ul class="list1">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ul class="list2">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("ul.list1 li").click(function(){
var theindex = $(this).index();//in here you get the index number of clicked li element inside list1 class
$("ul.list2 li").eq(theindex).slideToggle(500);//then in here, you show the same index li element in list2 , which we are hidden.
});
});
</script>
</html>
&#13;