jquery - 如何在 2 个 UL 元素之间隐藏和显示元素

Question

我有 2 个带有 LI 的 Ul 元素

<ul>
   <li id="rightli1">item1</li>
   <li id="rightli2">item2</li>
   <li id="rightli3">item3</li>
</ul>
<ul>
   <li id="leftli1">item1</li>
   <li id="leftli2">item2</li>
   <li id="leftli3">item3</li>
</ul>

在这里，如果我点击id = rightli1，它应该隐藏而其他leftli1应该是可见的，反之亦然，我该怎么做？这有点像拖放功能

Answer 1

类似的东西，或者在你的 UL 元素上使用类更容易：

 $('li').click(function() {
      var id_other = $(this).attr('id').contains('right') ? 'rightli' : 'leftli';
      var id_number = $(this).attr('id').replace(id_other, '');

      $(this).hide();
      $('li#'+ id_other + id_number).show();
 });

实际上不需要上课：

$('ul li').click(function() {
     $(this).hide();
     $('ul').not($(this).parent()).find('li:eq('+ $(this).index() +')').show();
});

另一种方式，更简单：

$('ul li').click(function() {
     $('li:eq('+ $(this).index() +')').toggle();
});

如果您的 LI 元素在开始时是隐藏的。

Answer 2

在您的代码中-

<ul class="right">
   <li id="rightli1">item1</li>
   <li id="rightli2">item1</li>
   <li id="rightli3">item1</li>
</ul>
<ul class="left">
   <li id="leftli1">item1</li>
   <li id="leftli2">item1</li>
   <li id="leftli3">item1</li>
</ul>

这里jquery-

$('.right li').click(function () {
    var idx = $(this).index();
    $('.left li').eq(idx).slideToggle();
});

它将选择与您的正文内容平行的列表。请记住，避免在单个页面中使用大量 id，使用类。

相关演示-

选择并行列表

Answer 3

你可以试试这个：

$('ul').eq(0).children('li').click(function(){
   var index = $(this).index();
   $('ul').eq(1).find('li').eq(index).hide();
});

$('ul').eq(1).children('li').click(function(){
   var index = $(this).index();
   $('ul').eq(0).find('li').eq(index).hide();
});