javascript - 点击显示一里，隐藏休息 |单击第二个列表中的其他选项后，为第一个列表保存选项

Question

这是我的代码，我有两个问题:1. 例如我点击 List 1然后在 Show info 2 .我如何使选项唯一以显示唯一信息并“保存”active在 Show info 2 中上课所以在我点击List 2之后并选择例如 Show info 8然后回到List 1 , Show info 2仍将处于事件状态，不会通过单击 Show info 8 进行更改。至 Show info 3 ？

应该是这样的:我点击List 1 -> Show info 2 -> Info 2在 List 1 中弹出选项被选中，背景色为Show info 2是黄色的然后我点击List 2 (List 1 和 Info 2 正在隐藏)-> Show info 8 -> Info 8在 List 2 中弹出选项被选中，背景色为Show info 8是黄色的。我再次点击 List 1 (List 2 和 Info 8 隐藏)应该已经弹出了 info 2和 Show info 2应该有 yellow background-color .我试过 ID的而不是 class es，但是只有一个列表可以被点击..

2.如何重构我的 JS 代码来制定上述规则？起初我就像“它的工作正常......但后来我写了第二个列表，我不想第二次写那么多代码来显示和隐藏 <li> 元素上的元素，当它们实际上都是相同的。

var displayNone = 'displayNone';
var active = 'active'; //from bootstrap nav-tabs to style active <li> elements

var showList1 = $('.showList1');
var showList2 = $('.showList2');

var hiddenList1 = $('#list1');
var hiddenList2 = $('#list2');

hiddenList1.addClass(displayNone);
hiddenList2.addClass(displayNone);

showList1.on('click', function () {
	$(hiddenList2).addClass(displayNone);
  $(hiddenList1).removeClass(displayNone);
  
});
showList2.on('click', function () {
	$(hiddenList1).addClass(displayNone);
  $(hiddenList2).removeClass(displayNone);
});

var info1_Id = $('.info1');
var info2_Id = $('.info2');
var info3_Id = $('.info3');
var info4_Id = $('.info4');
var info5_Id = $('.info5');

var info1_Display = $('.info1-display');
var info2_Display = $('.info2-display');
var info3_Display = $('.info3-display');
var info4_Display = $('.info4-display');
var info5_Display = $('.info5-display'); 

info1_Display.addClass(displayNone);
info2_Display.addClass(displayNone);
info2_Display.addClass(displayNone);
info3_Display.addClass(displayNone);
info4_Display.addClass(displayNone);
info5_Display.addClass(displayNone);

info1_Id.on('click', function () {
  $(this).addClass(active);
  info2_Id.removeClass(active);
  info3_Id.removeClass(active);
  info4_Id.removeClass(active);
  info5_Id.removeClass(active);

  info2_Display.addClass(displayNone);
  info3_Display.addClass(displayNone);
  info4_Display.addClass(displayNone);
  info5_Display.addClass(displayNone);
  info1_Display.removeClass(displayNone);
});

info2_Id.on('click', function () {
  $(this).addClass(active);
  info1_Id.removeClass(active);
  info3_Id.removeClass(active);
  info4_Id.removeClass(active);
  info5_Id.removeClass(active);

  info1_Display.addClass(displayNone);
  info3_Display.addClass(displayNone);
  info4_Display.addClass(displayNone);
  info5_Display.addClass(displayNone);
  info2_Display.removeClass(displayNone);
});

info3_Id.on('click', function () {
  $(this).addClass(active);
  info1_Id.removeClass(active);
  info2_Id.removeClass(active);
  info4_Id.removeClass(active);
  info5_Id.removeClass(active);

  info1_Display.addClass(displayNone);
  info2_Display.addClass(displayNone);     
  info4_Display.addClass(displayNone);     
  info5_Display.addClass(displayNone);     
  info3_Display.removeClass(displayNone);
});

info4_Id.on('click', function () {
  $(this).addClass(active);
  info1_Id.removeClass(active);
  info2_Id.removeClass(active);
  info3_Id.removeClass(active);
  info5_Id.removeClass(active);

  info1_Display.addClass(displayNone);
  info2_Display.addClass(displayNone);     
  info3_Display.addClass(displayNone);     
  info5_Display.addClass(displayNone);     
  info4_Display.removeClass(displayNone);
});

info5_Id.on('click', function () {
  $(this).addClass(active);
  info1_Id.removeClass(active);
  info2_Id.removeClass(active);
  info3_Id.removeClass(active);
  info4_Id.removeClass(active);

  info1_Display.addClass(displayNone);
  info2_Display.addClass(displayNone);     
  info3_Display.addClass(displayNone);     
  info4_Display.addClass(displayNone);     
  info5_Display.removeClass(displayNone);
});

.displayNone{
  display: none;
}

ul > li{
  list-style-type: none;
  width: 100px;
  height: 20px;
  margin-bottom: 5px;
  background-color: lightblue;
}

.active{
  background-color: yellow;
}

ul>li:hover, div{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showList1">List 1
  <ul id="list1">
    <li class="info1">Show info 1</li>
    <li class="info2">Show info 2</li>
    <li class="info3">Show info 3</li>
    <li class="info4">Show info 4</li>
    <li class="info5">Show info 5</li>
  </ul>

  <div class="info-box list1">
    <ul>
      <li class="info1-display">Info 1</li>
      <li class="info2-display">Info 2</li>
      <li class="info3-display">Info 3</li>
      <li class="info4-display">Info 4</li>
      <li class="info5-display">Info 5</li>
    </ul>
  </div>
 </div>

<div class="showList2">List 2
    <ul id="list2">
      <li class="info1">Show info 6</li>
      <li class="info2">Show info 7</li>
      <li class="info3">Show info 8</li>
      <li class="info4">Show info 9</li>
      <li class="info5">Show info 10</li>
    </ul>
    <div class="info-box list2">
    <ul>
      <li class="info1-display">Info 6</li>
      <li class="info2-display">Info 7</li>
      <li class="info3-display">Info 8</li>
      <li class="info4-display">Info 9</li>
      <li class="info5-display">Info 10</li>
    </ul>
</div>
</div>

Answer 1

希望我已经接近您正在寻找的答案。 jsfiddle我试图在这个 fiddle 中尽可能多地保留您的结构。

我制作了一组:列表标题、操作列表(显示信息 1、显示信息 2)、信息列表。当您单击列表标题时，它将显示该组操作列表和选定信息(如果有)并隐藏所有其他组操作列表/信息。

本例中元素的显示/隐藏是通过 css 和“事件”类的应用完成的。如果一个组有事件类，它将显示其操作列表和信息(否则隐藏)。如果一个 Action li 有事件类，它将有黄色的背景色。如果信息 li 具有事件类，它将显示(否则隐藏)

    //Clicking on the header will add active class to its group and remove from all sibling groups (this assumes that all groups are on the same DOM level
$('a.list-header').click(function(){
        $(this).closest('div.list-group').addClass('active').siblings('div.list-group').removeClass('active');
    });
//clicking an action list item will toggle the active class and then find the appropriate info li and toggle the active class there as well
    $('div.list-group').on('click', 'li.list-item', function(e){
        var $li = $(this),
          info=$(this).data('toggle'),
            $listGroup = $(e.delegateTarget);

          $li.addClass('active').siblings().removeClass('active');
      $listGroup.find('ul.info-list li[data-info="'+info+'"]').addClass('active').siblings().removeClass('active');
    });