当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - show one li, hide rest on click | save option for first list after clicking on other option in second list

问题描述:

Here is my code and i have two questions about it:

1. For example I'm clicking on List 1 and then on Show info 2. How can i make options unique to show unique information AND "save" active class in Show info 2 so after i will click on List 2 and choose for example Show info 8 and then go back to List 1, Show info 2 will still be active and won't be changed by clicking on Show info 8 to Show info 3?

Should be like this: I click on List 1 -> Show info 2-> Info 2 pops option in List 1 is choosen, background color for Show info 2 is yellow Then I click on List 2(List 1 and Info 2 are hiding) -> Show info 8 -> Info 8 pops option in List 2 is choosen, background color for Show info 8 is yellow. I click again on List 1 (List 2 and Info 8 hides) and there should be popped already info 2 and Show info 2 should have yellow background-color.

I have tried with ID's instead of classes, but then only one list will be able to be clicked..

2.How can i refactor my JS code to make above rule? At first i was like "well its working.. but then i wrote second list and i don't want to write 2nd time that much code to just show and hide elements on <li> elements when they are all the same de facto.

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>

网友答案:

I hope I got close to the answer you were looking for. jsfiddle I tried to keep as much of your structure as possible in this fiddle.

I made a group of : list header, action list (show info 1, show info 2), info list. when you click a list header, it will show that groups action list and selected info if there is one and hide all other groups actions lists/info.

the showing/hiding of elements in this example is done with css and the applying of an "active" class. if a group has the active class, it will show its action list and info (otherwise its hidden). if an action li has the active class, it will have the background color of yellow. if an info li has the active class, it will show (otherwise its hidden)

    //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');
    });
网友答案:

$(".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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: