我遇到两个功能完全独立但不能一起工作的问题。
我有一个功能来制作动态菜单,另一个功能是在div中加载页面。
当我单击菜单中的链接时,我的页面正确加载在好的div中,但似乎停止了Slide功能。所以,我没有看到我的sousmenu。
我是编码的初学者,我花了很多时间尝试解决它。我试着用$ .ajax加载,但结果是一样的。
感谢您的帮助!
//menu accordeon
jQuery().ready(function() {
$('.menu').next('.sousmenu').hide();
$('.menu').on('click', function() {
if ($(this).next(".sousmenu").is(":hidden")) {
$('.menu').next(".sousmenu:visible").slideUp();
$(this).next(".sousmenu").slideDown();
}
});
return true;
});
//loadPage
function loadPage(urlToLoad) {
$('#page').load(urlToLoad);
};
.menu,
.menu-item {
font-size: 0.75em;
list-style-type: none;
text-decoration: none;
}
.menu a {
color: #ababab;
font-size: 0.9em;
text-decoration: none;
}
.menu a:hover {
color: #757575;
font-weight: 500;
}
.menu a.active {
color: #757575;
font-weight: 500;
}
.sousmenu {
list-style-type: none;
text-decoration: none;
line-height: 0.6em;
}
.sousmenu:last-child {
margin-bottom: 10px;
}
.sousmenu a {
color: #ababab;
font-size: 0.6em;
list-style-type: none;
text-decoration: none;
}
.sousmenu a:hover,
a:active {
color: #757575;
font-weight: 500;
}
<div id="mainmenu" class="col-2">
<?php foreach($menu as $menuitem): ?>
<ul class="menu">
<a href="javascript:void(0)" onclick="loadPage('../page/<?=$menuitem['wnicename'] ;?>')">
<?=$ menuitem[ 'name']; ?>
</a>
</ul>
<ul class="sousmenu">
<?php foreach($sousmenu as $sousmenuitem): if ($sousmenuitem[ 'id_parent']==$ menuitem[ 'id']){ echo "<li>"; echo "<a href=\"javascript:void(0)\ " onclick=\"loadPage( '"../page/" . $sousmenuitem['wnicename '] . "');\ ">"; echo $sousmenuitem[ 'name'];
echo "</a></li>"; }?>
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
</div>
<!--mainmenu-->
<div id="page" class="col-12">
</div>
<!--page-->