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 - ＆gt; Show info 2 - ＆GT;选择Info 2中的List 1 pops 选项，Show info 2的背景颜色为黄色然后我点击List 2（List 1和{ {1}}正在隐藏） - ＆gt; Info 2 - ＆gt;选择Show info 8中的Info 8 pops 选项，List 2的背景颜色为黄色。我再次点击Show info 8（List 1和List 2隐藏），应该已经弹出Info 8而info 2应该Show info 2。我尝试使用yellow background-color而不是ID es，但之后只能点击一个列表..

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

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

Answer 1

我希望我接近你想要的答案。 jsfiddle 我试图在这个小提琴中保留尽可能多的结构。

我制作了一组：列表标题，动作列表（显示信息1，显示信息2），信息列表。当您单击列表标题时，它将显示组操作列表和所选信息（如果有）并隐藏所有其他组操作列表/信息。

此示例中元素的显示/隐藏是使用css和应用“活动”类完成的。如果一个组有活动类，它将显示其动作列表和信息（否则隐藏）。如果动作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');
    });

Answer 2

$(".listOpener").click( function () {
    $("li").hide();
    $(this).next("ul").children(".show").show();
});

$(".show").click( function () {
    $(this).addClass("active").siblings('.show').removeClass('active');
    $(".info").hide()
    $(this).next(".info").show();
});

.active {
  background-color: yellow;
}

.show {
  display: none;
}

.info {
  display: none;
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css" type="text/css" media="screen" charset="utf-8">

        <title>title</title>
    </head>

    <body>
        <div>
            <a class="listOpener">List 1</a>
            <ul class="list">
                <li class="show">show 1</li>
                <li class="info">
                    info 1
                </li>
                <li class="show">show 2</li>
                <li class="info">
                    info 2
                </li>
                <li class="show">show 3</li>
                <li class="info">
                    info 3
                </li>
            </ul>
        </div>


        <div>
            <a class="listOpener">List 2</a>
            <ul class="list">
                <li class="show">show 4</li>
                <li class="info">
                    info 4
                </li>
                <li class="show">show 5</li>
                <li class="info">
                    info 5
                </li>
                <li class="show">show 6</li>
                <li class="info">
                    info 6
                </li>
            </ul>
        </div>


        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="app.js" type="text/javascript" charset="utf-8"></script>


    </body>
        </html>

如果你想要你可以使用.toggle（）而不是show（）和hide（），但你必须改变一些东西。

显示一个李，隐藏休息点击|单击第二个列表中的其他选项

2 个答案: