Question

我正在尝试查看在this page左上角的展开所有主题/折叠所有主题按钮切换时执行的代码。我查看了源代码并在Chrome Inspector中进行了挖掘，但我还没有找到它。它没有列出任何听众。来源非常简单，所以我认为它应该是直截了当的。如果有人能指出我正确的方向，我会很感激。

Answer 1

按钮的ID为tglTopicBtn

代码是：

$("#tglTopicBtn").button({
    icons: {primary: "ui-icon-carat-1-s"}
}).click(function() {
    lastClickedSection = undefined;
    var options;
    if ($(this).text() === "Expand All Topics") {
        options = {
            label: "Collapse All Topics",
            icons: {primary: "ui-icon-carat-1-n"}
        };
        showSections();
    }
    else {
        options = {
            label: "Expand All Topics",
            icons: {primary: "ui-icon-carat-1-s"}
        };
        hideSections();
    }
    $(this).button("option", options);
    updateSelectedSection();
    return false;
});

我在F12/source/js/basic.js

下找到了它

以下是使用jQuery访问时查找源代码的步骤，以供将来使用：

如果您要查找与网络中div相关联的js代码，请在右键单击选项中选择View page source。
如果该div中有一些文字，请使用crtl+f找到它。在这种情况下，我找到了<button id="tglTopicBtn">Expand All Topics</button>
转到F12/Source，查找JScript代码。在名称合理的文件中查找带tglTopicBtn的id（ctrl+f）。通常会下载bootstrap.js或jquery.js等文件。在这种情况下，basic.js和hooks.js看起来像网站的特定代码。

Answer 2

代码在basic.js中：

第＃321行

$("#tglTopicBtn").button({
        icons: {primary: "ui-icon-carat-1-s"}
    }).click(function() {
        lastClickedSection = undefined;
        var options;
        if ($(this).text() === "Expand All Topics") {
            options = {
                label: "Collapse All Topics",
                icons: {primary: "ui-icon-carat-1-n"}
            };
            showSections();
        }
        else {
            options = {
                label: "Expand All Topics",
                icons: {primary: "ui-icon-carat-1-s"}
            };
            hideSections();
        }
        $(this).button("option", options);
        updateSelectedSection();
        return false;
    });

第191行

function showSections() {
        $('section > h2').each(function() {
            $(this).next('div').show();
            $(this).button({
                icons: {primary: "ui-icon-circle-minus"}
            });
        });
        $('section > h3').each(function() {
            $(this).next('div').show();
            $(this).addClass("d_arrow");
        });
    }

Answer 3

代码位于basic.js。

$("#tglTopicBtn").button({
    icons: {primary: "ui-icon-carat-1-s"}
}).click(function() {
    lastClickedSection = undefined;
    var options;
    if ($(this).text() === "Expand All Topics") {
        options = {
            label: "Collapse All Topics",
            icons: {primary: "ui-icon-carat-1-n"}
        };
        showSections();
    }
    else {
        options = {
            label: "Expand All Topics",
            icons: {primary: "ui-icon-carat-1-s"}
        };
        hideSections();
    }
    $(this).button("option", options);
    updateSelectedSection();
    return false;
});
function hideSections() {
    $('section > h2').each(function() {
        $(this).next('div').hide();
        $(this).button({
            icons: {primary: "ui-icon-circle-plus"}
        });
    });
    $('section > h3').each(function() {
        $(this).next('div').hide();
        $(this).removeClass("d_arrow");
    });
}

function showSections() {
    $('section > h2').each(function() {
        $(this).next('div').show();
        $(this).button({
            icons: {primary: "ui-icon-circle-minus"}
        });
    });
    $('section > h3').each(function() {
        $(this).next('div').show();
        $(this).addClass("d_arrow");
    });
}

查看附加到html按钮的代码

3 个答案: