Hello - Im teaching my self javascript & jquery so this might be a bit of a low brow question or entirely too much code for anyone to wade through, but Im hoping for some feedback. I have looked around and haven't found a thread that looks like it will deals neatly with my question.
Im using
the cms indexhibit (cant create a new tag!) and trying to create an accordion style menu from
the menu list it generates. I basically have
the behaviour Im after, modifying an existing bit of work but there are quite a few foibles, which are no doubt a conflict between
the .click and .toggle and a confused use if statements.
I basically want to start from scratch and redo this so I can
a) learn from my mistakes b) understand what's happening.
Im having trouble now because I dont know where to go from here, or how to trouble shoot it.
Can anyone give me a quick analysis how
the the script in
the head of
the document work together?
Also any insight into
the nature of
the conflicts Im seeing and what approach might take to remedy them?
If you were going to start afresh what would be your approach?
Here is a test to see it in action (warts and all): http://stillstatic.nfshost.com/
This script goes into
the document head:
<script type='text/javascript'> //im not entirely clear as to what this achieves
path = 'path/to/script/';
$(document).ready(function() {
setTimeout('move_up()', 1);
expandingMenu(0);
expandingMenu(1);
expandingMenu(2);
expandingMenu(3);
expandingMenu(4);
//etc
});
</script>
the generated list:
<ul>
<li class='section-title active_menu'>blogs</li>
<li><a class="active" href='#' onclick="do_click();">3</a></li>
</ul>
<ul> //this menu section dose not have a label: class .section-title
<li><a href='#' onclick="do_click();">1</a></li>
<li><a href='#' onclick="do_click();">2</a></li>
</ul>
<ul> //this menu section is not
the 'active menu' this is achieved by
the jquery script
<li class='section-title'>writing</li>
<li><a href='#' onclick="do_click();">4</a></li>
<li><a href='#' onclick="do_click();">5</a></li>
</ul>
The meat of in an external script:
function expandingMenu(num) {
var speed = 500;
var menu_title = $("#menu ul").eq(num).children(":first"); // ie. first child be
the title with
the class .section-title unless
the user turned it off
var menu_items = $("#menu ul").eq(num).children().filter(function (index) { return index 0; }); // ie. any li NOT in position 0, below li.section-title
if (menu_items.is(".active") == true) {
menu_title.addClass("active_menu"); //Add a class to
the active list so we can style it.
}
if (menu_title.is(".section-title") == true){ // this if prevents interference with users who turn off
the section titling
if ((menu_items.is(".active") == false) && (menu_items.is(":visible")) ) {
menu_items.hide(0);// first we hide
the inactive exhibits
}
$('li').click(function (){
if ( (menu_title.is(":visible") == true) ){
menu_items.hide(speed);
}
if ( (menu_items.is(":hidden") ==
true ) && (('')) ){// ?! without this second condition things break down. . .
menu_items.show(speed);
}
})
menu_title.css({cursor:"pointer"}).toggle( // add click functions + pointer to menu_title
function () {
menu_items.show(speed);//Open it up
},
function () {
// this function could even be empty but without
the if things get weird
if (menu_items.is(".xx"))
menu_items.hide(speed); //Take
the menu item off of active duty!
}
)
}
}
