I've created a form and a part of this form is a list which has five elements. These elements can be hovered by mouse. The hovered elements have class of selected. The question is how can I take the value of this elements in order to send it to server?
<ul id="service" class="icon-group booking-item-rating-stars">
<li id="1">
<i class="fa fa-smile-o"></i>
</li>
<li id="2">
<i class="fa fa-smile-o"></i>
</li>
<li id="3">
<i class="fa fa-smile-o"></i>
</li>
<li id="4">
<i class="fa fa-smile-o"></i>
</li>
<li id="5">
<i class="fa fa-smile-o"></i>
</li>
</ul>
If I understand you correct this is what you need:
$('#service li').on('hover', function() {
sendToServer($(this).text());
});
And if you need to check selected class:
$('#service li').on('hover', function() {
var $this = $(this);
if ($this.hasClass('selected')) {
sendToServer($this.text());
}
});
Try this demo, if your <li> looks like this:
<li>
<input type="hidden" id="3" value="3">
<i class="fa fa-smile-o">c</i></li>
<li>
demo:
$(function() {
$('#service li').hover(function() {
$(this).addClass('selected'); // add selected class on hover
var data = $(this).find(':hidden').val(); // get input hidden value inside the li
sendToServer(data); // call send to server function passing data variable
}, function() {
$(this).removeClass('selected');
});
});
function sendToServer(data) {
console.log(data);
// insert send to server program here
}
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="service" class="icon-group booking-item-rating-stars">
<li>
<input type="hidden" id="1" value="1">
<i class="fa fa-smile-o">a</i></li>
<li>
<input type="hidden" id="2" value="2">
<i class="fa fa-smile-o">b</i></li>
<li>
<input type="hidden" id="3" value="3">
<i class="fa fa-smile-o">c</i></li>
<li>
<input type="hidden" id="4" value="4">
<i class="fa fa-smile-o">d</i></li>
<li>
<input type="hidden" id="5" value="5">
<i class="fa fa-smile-o">e</i></li>
</ul>
Related
I have a div which has a ul and list items in it.
<div class="col-md-2"><input id="jackSerachBox" class="form-control input-md m-t-sm" type="text" placeholder="Search for Jacks.."></div>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="jacksTab">
<li role="presentation" class="active">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-3" name="selectedjacks" value="3">
<label class="text-muted text-uppercase small">NEW40206 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-6" name="selectedjacks" value="6">
<label class="text-muted text-uppercase small">NewJack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-4" name="selectedjacks" value="4">
<label class="text-muted text-uppercase small">Jack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
</ul>
</div>
I am trying to access it using :
$('#jackSerachBox').on('keyup', function (e) {
var input, filter, ul, li, a, i;
// filter = input.val().toUpperCase();
li = $('#jacksTab li');
li.each(function (e) {
a = $('a', $(e)).eq(0);
console.log(a.html())
//test.html(a.html())
})
})
But getting undefined. I did ask similar question , but that was answered with the context. To be fair , had marked that as answer and did not post follow ups on that.
To be more accurate this time here is the jsfiddle for same.
Simply use this inside your .each instead of using a parameter :
If you don't want to use this, you need to edit your .each() parameters to .each(_, e), since the first parameter from the callback is the index of the element.
See the jQuery#each documentation
$('#jackSerachBox').on('keyup', function(e) {
$('#jacksTab li').each(function() {
console.log($('a', this).html())
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2"><input id="jackSerachBox" class="form-control input-md m-t-sm" type="text" placeholder="Search for Jacks.."></div>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="jacksTab">
<li role="presentation" class="active">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-3" name="selectedjacks" value="3">
<label class="text-muted text-uppercase small">NEW40206 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-6" name="selectedjacks" value="6">
<label class="text-muted text-uppercase small">NewJack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
<li role="presentation" class="">
<a data-toggle="tab" class="dd-handle">
<input type="checkbox" id="JackcheckBox-4" name="selectedjacks" value="4">
<label class="text-muted text-uppercase small">Jack12 </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
</a>
</li>
</ul>
</div>
I have three dropdown menus which I want to display the selected item on the button for each. However, my jQuery code is changing the selected item for all three dropdowns. If I click on one item in any of the dropdowns, all three change to the item I've selected. How do I make it so they display their own selected items separately?
HTML
<div class="form-inline">
<div class="form-group">
<button type="button" id="vegetype" name="vegetype" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All vege types <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">All</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Brocolli</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Cucumber</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Kale</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Carrot</label></li>
</ul>
</div><!-- end form-group -->
<div class="form-group">
<button type="button" id="fruits" name="fruits" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fruits <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li class="dropdown-item">Apple</li>
<li class="dropdown-item">Orange</li>
<li class="dropdown-item">Banana</li>
</ul>
</div><!-- end form-group -->
<div class="form-group">
<button type="button" id="max_num" name="max_num" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Number <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li class="dropdown-item">1</li>
<li class="dropdown-item">2</li>
<li class="dropdown-item">3</li>
<li class="dropdown-item">4</li>
</ul>
</div><!-- end form-group -->
</div>
JS
$(document).ready(function(){
$(".dropdown-menu li").click(function(){
$(".btn").text($(this).text());
});
});
Change $(".btn").text($(this).text()); To
$(this).parent().siblings('.btn').text($(this).text());
$(document).ready(function(){
$(".dropdown-menu li").click(function(){
$(this).parent().siblings('.btn').text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-inline">
<div class="form-group">
<button type="button" id="vegetype" name="vegetype" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All vege types <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">All</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Brocolli</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Cucumber</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Kale</label></li>
<li class="dropdown-item"><label class="form-check-label"><input class="form-check-input" type="checkbox" value="">Carrot</label></li>
</ul>
</div><!-- end form-group -->
<div class="form-group">
<button type="button" id="fruits" name="fruits" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Fruits <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li class="dropdown-item">Apple</li>
<li class="dropdown-item">Orange</li>
<li class="dropdown-item">Banana</li>
</ul>
</div><!-- end form-group -->
<div class="form-group">
<button type="button" id="max_num" name="max_num" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Number <i class="fa fa-angle-down" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li class="dropdown-item">1</li>
<li class="dropdown-item">2</li>
<li class="dropdown-item">3</li>
<li class="dropdown-item">4</li>
</ul>
</div><!-- end form-group -->
</div>
Change this:
$(".btn").text($(this).text());
to
$(this).closest(".btn").text($(this).text());
and try again.
Explanation: When you are using $(".btn").text($(this).text());, means you are selecting all the buttons, but you have to select only the associated button itself, so yiu have to use DOM traversing function to get the right button.
I have checkboxes inside a dropdown menu. I've to get the checkboxes which are selected (checked)
Code:
<ul role="menu" class="dropdown-menu" id="comp">
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Monday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Tuesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Wednesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Thursday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Friday</span>
</a>
</li>
</ul>
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit">
<script type="text/javascript">
function myFunction()
{
/* Get selected check boxes here */
}
</script>
You can try this solution also. Here you will get the checked checkbox elements list. You can also update this checked element list during run time also.
Check the following demo:
Fiddle Demo
Stack Example
$(function() {
var checkedItems = $("#comp input:checked");
console.log(checkedItems);
$("#comp input[type='checkbox']").change(function() {
if ($(this).attr("checked") == "checked") {
checkedItems.push($(this)[0]);//Add the checked element
console.log(checkedItems);
} else {
checkedItems.splice($.inArray($(this)[0], checkedItems), 1);//Remove the unchecked element
console.log(checkedItems);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul role="menu" class="dropdown-menu" id="comp">
<li>
<a href="#">
<input type="checkbox" id="a1">
<span class="lbl"> Monday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a2">
<span class="lbl"> Tuesday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a3" checked="checked">
<span class="lbl"> Wednesday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a4">
<span class="lbl"> Thursday</span>
</a>
</li>
<li>
<a href="#">
<input type="checkbox" id="a5">
<span class="lbl"> Friday</span>
</a>
</li>
</ul>
Check the console for selected checkboxes.
function myFunction(){
var checkBoxes=$("#comp input[type=checkbox]:checked");
console.log(checkBoxes);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul role="menu" class="dropdown-menu" id="comp">
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Monday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Tuesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Wednesday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Thursday</span>
</a>
</li>
<li><a href="#">
<input type="checkbox">
<span class="lbl"> Friday</span>
</a>
</li>
</ul>
<input type="submit" class="btn btn-info" onclick="myFunction()" value="Submit">
Try it, it will return all selected checkbox values as you select any checkbox:
<ul role="menu" class="dropdown-menu" id="comp">
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="monday" type="checkbox">
<span class="lbl"> Monday</span>
</a></li>
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="tuesday" type="checkbox">
<span class="lbl"> Tuesday</span>
</a></li>
<li><a href="#">
<input name="chklist" value="wednesday" onclick="get_selected_val()" type="checkbox">
<span class="lbl"> Wednesday</span>
</a></li>
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="thursday" type="checkbox">
<span class="lbl"> Thursday</span>
</a></li>
<li><a href="#">
<input name="chklist" onclick="get_selected_val()" value="friday" type="checkbox">
<span class="lbl"> Friday</span>
</a></li>
</ul>
function get_selected_val() {
$('input[name="chklist"]:checked').each(function() {
console.log(this.value);
});
}
I am trying to create an expandable accordion using jquery. I am not able to figure out that how am I supposed to prevent it from expanding on page load. I have no idea of jquery,and any help will be greatly appreciated.
<ul>
<li class="expandable root">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class="pull-right oraganization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="accordion">
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul id="accordion">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>
JS File:
$(document).ready(function(){
$('.expand-icon').click(function(){
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
});
You an find the bootply at this link: http://www.bootply.com/1W8bSTnmx6
Fiddle Here
This is because you have this first accordian open when loading it. To fix it, do a click operation on this at the time of load with $($('#accordion .expand-icon')[0]).click();. Check the working example here http://www.bootply.com/vGoKbvfKtl
you are just displaying all the accordions when the page gets loaded since there is no hiding any where.
According to your code Since only the first Accordion contains the data, it is getting displayed else every expandable div will get displayed.
The solution for this is to add a hide class to the class accordion so that it does not display at the beginning, the at the time of click function, you can remove that class and it gets displayed.
$(document).ready(function(){
$('.expand-icon').click(function(){
$('ul').removeClass('hide')
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
$('.organization').click(function(){
$('.accordion')[0].click()
})
});
<ul>
<li class="expandable ">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class=" organization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="">
<li class="expandable">
<span class="expand-icon glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul class="accordion hide">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>
Here is the bootply,
Bootply link for it
I'm struggling to find the correct code to a navigation sidebar on a angularJS app. What should happen is when you click a link a background color should highlight the active link. It does work as expected except you have to click each link twice before the highlight shows.
What is it that I'm doing wrong? Any help would be greatly appreciated.
javascript
$scope.addActiveClass = function ($index) {
$scope.addActiveClass = $index;
var checked = $('ul.sidebar2-nav li');
$(checked).on("click", "", function () {
$(this).addClass('active-label');
});
}
html
<nav id="program-editor-pullout" menustate="closed" >
<ul class="list-unstyled sidebar2-nav">
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: evaluations}" ui-sref-active="active" ui-sref=".evaluation">Evaluations</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: questions}" ui-sref-active="active" ui-sref=".question">Questions</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass()" ng-class="{active: hstranscripts}" ui-sref-active="active" ui-sref=".hstranscripts">High School Transcripts</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: collegetranscripts}" ui-sref-active="active" ui-sref=".collegetranscripts">College Transcripts & Course Work</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: prerequisites}" ui-sref-active="active" ui-sref=".prerequisites">Prerequisites</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: documents}" ui-sref-active="active" ui-sref=".document">Documents</a>
</label>
</div>
</li>
</ul>
</nav>
CSS
ul.sidebar2-nav li a.active {
color: #000;
cursor: pointer;
text-decoration: none;
}
ul.sidebar2-nav li.active-label {
background: whitesmoke;
}
I found the solution. Your example was correct, but in my html code I had this:
<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
Notice how the anchor tag has the ng-class and the ui-sref-active on it. I removed these attributes and it works as expected. Thank you for your guidance, I appreciate it!!
Move click event from a to parent li tag
<nav id="program-editor-pullout" menustate="closed" >
<ul class="list-unstyled sidebar2-nav">
<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
Change your click handler to something like this
$scope.addActiveClass = function ($event, $index) {
$scope.addActiveClass = $index;
//var checked = $('ul.sidebar2-nav li');
//$(checked).on("click", "", function () {
// $(this).addClass('active-label');
//});
$($event.target).addClass('active-label');
}