0

私はLIで2つの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ます。逆も同様ですが、どうすればよいですか? ドラッグアンドドロップ機能のようなものです

4

3 に答える 3

2

そのようなもの、または 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 要素が最初に非表示になっている場合。

于 2013-02-19T08:17:10.270 に答える
1

あなたのコードで-

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

本文コンテンツに対応するリストが選択されます。また、1 つのページに複数の ID を使用することは避け、クラスを使用してください。

関連デモ-

並列リストの選択

于 2013-02-19T08:21:30.960 に答える
0

あなたはこれを試すことができます：

$('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();
});
于 2013-02-19T08:19:54.323 に答える