change class of glyphicon when nav-item is open - twitter-bootstrap-3

Question

I am using bootstrap menu on a web page.
my menu list looks something like this:
<li><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">main item
<span class="pull-left glyph-btn-menu">
<em class="glyphicon glyphicon-menu-down"></em>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
sub item1<br>
sub item2<br>
sub item2<br>
</div>
</li>
I want glyphicon symbol to change to class glyphicon-menu-up when nav-link is clicked and submenu items open and then again to change back to glyphicon-menu-down when nav-item is closed or when a different nav-item is clicked.
What would be the best way to acheive that

Answer 1

So this is my solution.
I gave the parent ul the an id value: id="theme"
bootstrap adds the class open to an open li so I check to see if any li have the class open, remove and add glyphicon classes as needed
$('#theme li').click(function () {
if($(this).hasClass('open')){
//alert('aaa');
$(this).children('a').children('span').children('em').removeClass('glyphicon-menu-up');
$(this).children('a').children('span').children('em').addClass('glyphicon-menu-down');
} else {
$(this).children('a').children('span').children('em').removeClass('glyphicon-menu-down');
$(this).children('a').children('span').children('em').addClass('glyphicon-menu-up');
}
});