jQuery:打破嵌套函数

时间:2014-01-22 16:08:43

标签: jquery

我正在创建一个运行良好的仪表板。最后一步是创建方法的“用户指南”。我决定创建一个附在顶部链接栏上的下拉帮助菜单。作为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="&#xe03b;"></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

点击链接后:Click to view image

我如何以非嵌套的方式编写我的jQuery代码,这样我可以继续在目录和文章之间来回跳转?谢谢!

2 个答案:

答案 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');
}