引导jQuery <li> 点击添加图标到列表

Question

I have a unordered expandable bootsrap list.

When a user selects one of the items on the list (for example Day) i want to show an icon on the right.

currently i am using bootsrap hidden class to hide the span on the list. When the user selects the option i want the icon to appear so that it looks selected.

I have made Bootply

Is there a better way to do this than having all the icons on the list as hidden? Currently my Jquery function is not working:

JQUERY

$('ul.list-group li').click(function(e) 
{ 
    $('li.list-group-item').removeClass('list-group-item');
});

CSS

<ul class="list-group">
    <li class="list-group-item">Monday <span class="glyphicon glyphicon-ok pull-right hidden"></span></li>
    <li class="list-group-item">Tuesday<span class="glyphicon glyphicon-ok pull-right hidden"></span></li>
    <li class="list-group-item">Wednesday<span class="glyphicon glyphicon-ok pull-right hidden"></span></li>
    <li class="list-group-item">Thursday<span class="glyphicon glyphicon-ok pull-right hidden"></span></li>
    <li class="list-group-item">Friday<span class="glyphicon glyphicon-ok pull-right hidden"></span></li>
    <li class="list-group-item">Saturday<span class="glyphicon glyphicon-ok pull-right hidden"></span></li>
    <li class="list-group-item">Sunday<span class="glyphicon glyphicon-ok pull-right hidden"></span></li>   
</ul>

Answer 1

Something like this should work:

$('.list-group-item').click(function() { 
    $(this).children('span').toggleClass('hidden');   
});

What this will do is toggle the hidden class when when you click a list item. However, it still requires the hidden class.

What you could do is, in your css, something like this:

.list-group-item span {
    display: none;
}

.list-group-item.active span {
    display: block;
}

And then in your javascript you could do this:

$('.list-group-item').click(function() { 
    $(this).toggleClass('active');   
});

Answer 2

What you have to do is just toggle the hidden class from the span element when clicking li.list-group-item

$('li.list-group-item').click(function(e) {
    $(this).children('span').toggleClass('hidden');
});

 $('li.list-group-item').click(function(e) { $(this).children('span').toggleClass('hidden'); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-group"> <li class="list-group-item">Monday <span class="glyphicon glyphicon-ok pull-right hidden"></span> </li> <li class="list-group-item">Tuesday<span class="glyphicon glyphicon-ok pull-right hidden"></span> </li> <li class="list-group-item">Wednesday<span class="glyphicon glyphicon-ok pull-right hidden"></span> </li> <li class="list-group-item">Thursday<span class="glyphicon glyphicon-ok pull-right hidden"></span> </li> <li class="list-group-item">Friday<span class="glyphicon glyphicon-ok pull-right hidden"></span> </li> <li class="list-group-item">Saturday<span class="glyphicon glyphicon-ok pull-right hidden"></span> </li> <li class="list-group-item">Sunday<span class="glyphicon glyphicon-ok pull-right hidden"></span> </li> </ul>