Я преподаю свой собственный javascript и jquery, так что это может быть чем-то вроде низкого вопроса о бровях или слишком большим количеством кода, чтобы кто-нибудь мог его просмотреть, но я надеюсь на некоторую обратную связь. Я осмотрелся и не нашел ветку, которая выглядит так, как будто она аккуратно справится с моим вопросом.
Я использую индексный указатель cms (не могу создать новый тег!) И пытаюсь создать меню в стиле аккордеона из списка меню, которое он генерирует. Я в основном имею поведение Im после, изменяя существующую часть работы, но есть довольно много недостатков, которые, без сомнения, являются конфликтом между .click и .toggle и запутанным использованием операторов if.
Я в основном хочу начать с нуля и повторить это, чтобы я мог
а) учиться на своих ошибках б) понимать, что происходит.
У меня сейчас проблемы, потому что я не знаю, куда идти отсюда или как с этим справиться.
Может ли кто-нибудь дать мне быстрый анализ того, как сценарий в заголовке документа работает вместе?
Также какое-либо понимание природы конфликтов, которые я вижу, и какой подход может быть предпринят для их устранения?
Если бы вы собирались начать заново, каков был бы ваш подход?
Вот тест, чтобы увидеть его в действии (бородавки и все): http://stillstatic.nfshost.com/
Этот скрипт входит в заголовок документа:
<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>
сгенерированный список:
<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>
Мясо во внешнем скрипте:
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 EMPTY second condition things break down??? hu?. . .
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 a pointless 'if' things get really weird
if (menu_items.is(".xx"))
menu_items.hide(speed); //Take the menu item off of active duty!
}
)
}
}