Question

我有2个带有LI的UI元素

<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，使用类。

相关演示 -

Selecting parallel list

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();
});

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

3 个答案: