У меня ситуация такая: есть сайт с самописным движком. левое многоуровневое меню решил делать с помощью AJAX, тоесть подуровни подгружаются при нажатии на группу, из-за особенностей этого движка. А анимация этого меню сделана с помощью jQuery. Первый уровень у меня грузится вместе со страницей и он работает нормально. Проблема заключается в том что у подуровней которые грузятся с помощью AJAX не работает анимация и при обновлении страницы меню схлопывается. Само меню взял с
http://alt-f4.ru/expanding-menu-by-jquery#0
Подскажите пож как можно реализовать меню чтобы оно работало.
jQuery скрипт:
$(document).ready(menu());
function menu() {
$('ul#my-menu ul').each(function(i) { // Check each submenu:
if ($.cookie('submenuMark-' + i)) { // If index of submenu is marked in cookies:
$(this).show().prev().removeClass('collapsed').addClass('expanded'); // Show it (add apropriate classes)
}else {
$(this).hide().prev().removeClass('expanded').addClass('collapsed'); // Hide it
}
$(this).prev().addClass('collapsible').click(function() { // Attach an event listener
var this_i = $('ul#my-menu ul').index($(this).next()); // The index of the submenu of the clicked link
if ($(this).next().css('display') == 'none') {
// When opening one submenu, we hide all same level submenus:
$(this).parent('li').parent('ul').find('ul').each(function(j) {
if (j != this_i) {
$(this).slideUp(200, function () {
$(this).prev().removeClass('expanded').addClass('collapsed');
cookieDel($('ul#my-menu ul').index($(this)));
});
}
});
// :end
$(this).next().slideDown(200, function () { // Show submenu:
$(this).prev().removeClass('collapsed').addClass('expanded');
cookieSet(this_i);
});
}else {
$(this).next().slideUp(200, function () { // Hide submenu:
$(this).prev().removeClass('expanded').addClass('collapsed');
cookieDel(this_i);
$(this).find('ul').each(function() {
$(this).hide(0, cookieDel($('ul#my-menu ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed');
});
});
}
return false; // Prohibit the browser to follow the link address
});
});
}
function cookieSet(index) {
$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); // Set mark to cookie (submenu is shown):
}
function cookieDel(index) {
$.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); // Delete mark from cookie (submenu is hidden):
}
AJAX
require_once('config.php');
require_once($config['include_path'] . 'common.php');
$mysql = mysql_init();
if ($_GET['level']<2)
$getovergroups = "
SELECT id, name
FROM price_overgroups
WHERE id
IN (
SELECT price_ogroups_links.chld_id
FROM price_overgroups INNER JOIN price_ogroups_links ON (price_overgroups.id = price_ogroups_links.prnt_id)
WHERE price_ogroups_links.prnt_id = ".$_GET['id']."
)
";
$getgroups = "
SELECT price_groups.id, price_groups.name
FROM price_groups
LEFT JOIN price_groups2ogroups ON ( price_groups.id = price_groups2ogroups.group_id )
WHERE price_groups2ogroups.ogroup_id = ".$_GET['id']."
";
$nextlevel=$_GET['level']+1;
if ($_GET['level']<2)
{
$result = mysql_query($getovergroups, $mysql);
if (!$result) echo('Ошибка SQL' . mysql_error());
while ($row = mysql_fetch_assoc($result))
{
$str.="
<li><span onclick=\"loadHTML('/panels-ajax.php?id=".$row['id']."&level=".$nextlevel."&menu=1', 'content_".$row['id']."')\">".$row['name']."</span>
<ul id=\"content_".$row['id']."\">
</ul>
</li>
";
}
}
$result = mysql_query($getgroups, $mysql);
if (!$result) echo('Ошибка SQL' . mysql_error());
while ($row = mysql_fetch_assoc($result))
{
$str.="<li><a class=\"direction\" href=\"/catalog/index.php?group=".$row['id']."&menu=1\">".$row['name']."</a></li>";
}
print(iconv("WINDOWS-1251", "UTF-8", $str));
Кусок с HTML
<ul id="my-menu" class="sample-menu">
[block MENU_OVERGROUPS]
<!--<li><span onclick="loadHTML('[SYS_HOST]/panels-ajax.php?id=[MENU_OVERGROUPS.ID]&level=1&menu=1', 'content_[MENU_OVERGROUPS.ID]')">[MENU_OVERGROUPS.NAME]</span>-->
<li><span onclick="loadHTML('[SYS_HOST]/panels-ajax.php?id=[MENU_OVERGROUPS.ID]&level=1&menu=1', 'content_[MENU_OVERGROUPS.ID]')">[MENU_OVERGROUPS.NAME]</span>
<ul id="content_[MENU_OVERGROUPS.ID]">
</ul>
</li>
[/block MENU_OVERGROUPS]
[block MENU_GROUPS]
<li><a class="direction" href="[SYS_HOST]/catalog/index.php?group=[MENU_GROUPS.ID]&menu=1">[MENU_GROUPS.NAME]</a></li>
[/block MENU_GROUPS]
</ul>