我正在创建一个运行良好的仪表板。最后一步是创建方法的“用户指南”。我决定创建一个附在顶部链接栏上的下拉帮助菜单。作为jQuery / JavaScript的新手,我正在努力工作流程。虽然我已经能够制作出我想做的原型,但它只能在一个方向上工作,这意味着我可以导航到所选的文章,但是当回到目录时,它不再允许我浏览链接。
这是有道理的,因为我使用嵌套代码,我不知道如何以任何其他方式编写:
// TOGGLE DROP DOWN
$('.userguide').click(function() {
// FIRST LOAD OF TABLE OF CONTENTS
$('.guide_box').load('includes/guide/table_of_contents.php', function() {
$('.guide_container').slideToggle('slow');
// CHOOSE LINK FROM TABLE OF CONTENTS
$('.guide_link').click(function() {
$('.guide_box').load('includes/guide/creating_jobs.php', function() {
// BACK BUTTON TO TABLE OF CONTENTS
$('.backlink').click(function() {
$('.guide_box').load('includes/guide/table_of_contents.php');
});
});
});
});
});
我的HTML很简单:
<div class="header">
<ul class="hidden-phone">
<li>
<a class="userguide" href="#"><span class="fs1" aria-hidden="true" data-icon=""></span> User Guide</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="guide_container">
<div class="guide_pointer"></div>
<div class="guide_box"></div>
</div>
</div>
这里有几张照片来说明我正在尝试构建的内容:
点击链接后:Click to view image
我如何以非嵌套的方式编写我的jQuery代码,这样我可以继续在目录和文章之间来回跳转?谢谢!
答案 0 :(得分:0)
您应该能够使用事件委派来完成此操作,它允许您在元素存在之前绑定事件处理程序:
$(document).on('click', '.userguide', function() {
$('.guide_box').load('includes/guide/table_of_contents.php');
});
$(document).on('click', '.guide_box', function() {
$('.guide_container').slideToggle('slow');
});
$(document).on('click', '.guide_link', function() {
$('.guide_box').load('includes/guide/creating_jobs.php');
});
$(document).on('click', '.backlink', function() {
$('.guide_box').load('includes/guide/table_of_contents.php');
});
答案 1 :(得分:0)
在其他地方定义您的功能,只需在连接事件处理程序的地方调用它们:
// TOGGLE DROP DOWN
$('.userguide').click(toggleDropdown);
function toggleDropdown() {
// FIRST LOAD OF TABLE OF CONTENTS
$('.guide_box').load('includes/guide/table_of_contents.php', wireGuideContainer);
}
function wireGuideContainer() {
$('.guide_container').slideToggle('slow');
// CHOOSE LINK FROM TABLE OF CONTENTS
$('.guide_link').click(loadCreatingJobs);
}
function loadCreatingJobs() {
$('.guide_box').load('includes/guide/creating_jobs.php', wireBackButton);
}
function wireBackButton() {
// BACK BUTTON TO TABLE OF CONTENTS
$('.backlink').click(loadTableOfContents);
}
function loadTableOfContents() {
$('.guide_box').load('includes/guide/table_of_contents.php');
}