javascript - trigger visibility of sublist on class change -

javascript - trigger visibility of sublist on class change -

i've been trying accomplish lastly 2 days, i'm new javascript, maybe i'm not seeing something.

what i'm trying create sidenavigation, highlights current section at. have found jquery plugin charm http://trevordavis.net/blog/jquery-one-page-navigation-plugin/

but working subitems , trigger visibility of subitem, current section active. ul visible if containing list item has class of .current, , if 1 of sublist's list items has class .current.

i have found out, i'd need trigger event on class change. have tried following, has not yet worked.

markup:

<ul id="nav"> <li class="current"><a href="#section-1">section 1</a></li> <li><a href="#section-2">section 2</a></li> <li class="parent"><a href="#section-3">section 3</a> <ul class="sublist"> <li><a href="#subsection-1">subsection 1</a></li> <li><a href="#subsection-2">subsection 2</a></li> <li><a href="#subsection-3">subsection 3</a></li> </ul> </li> </ul>

for jquery have tried this:

$('#nav').on('event', function(){ $('.parent').addclass('current').trigger('visibility'); }); $('.parent').on('visibility', function(){ $('.parent .sublist').addclass('visible'); });

what trying bootrap in documentation. when scrolling down, can see glyphicons, reached section, subitems pop open (available glyphs, how use, examples) http://getbootstrap.com/components/

sass applied navigation far:

.overview{ transition: .3s all; ul{ margin-left: 10px; ul{ max-height: 0; transition: max-height 1s ease-out; overflow: hidden; } } } .current{ > a{ font-weight: $bold; } ul{ max-height: 9999px !important; transition: max-height 1s ease-out; } }

i have been able show sublist if parent set current, kid current, sublist hidden, figured, i'd need javascript

i see :)

what do, (there's multiple way, i'd do) create function checks on scroll if class nearing top of window, if so, add together class relating item in nav bar.

should relatively simple without plugin, along lines of:

var checkside = function(){ $('.container p').each(function(){ var item = $(this).offset().top, $window = $(window), navitem = $('#nav a[data-id="'+$(this).data('id')+'"]'); if ($window.scrolltop() >= item) { if (!navitem.hasclass('current')) { $('#nav .current').removeclass('current'); navitem.addclass('current'); } } }); }; $(window).scroll(function(){ checkside(); });

see http://codepen.io/jhealey5/pen/gjjfi - should able adapt needs.

assuming understood correctly :)

javascript jquery html css