Question

我有一个页面强制将一些JS加载到需要覆盖的页面上。我可以加载一个单独的JS文件来执行此操作。我想让页面为页面上的任何.show做.below-the-fold。我想最好的说法是，我希望页面加载时扩展页面上的所有“更多”内容，而不是让人们单击more来查看所有这些折叠之下的内容。这是我需要覆盖的JS，我无法更改它，因为它是由应用自动加载的。隐藏的列表可能不止一个，我不确定这会使事情变得困难多少。

function MoreFacets($more_facets_div) {
    this.$more_facets_div = $more_facets_div;

    this.bind_events();
};

MoreFacets.prototype.bind_events = function() {
    var self = this;

    self.$more_facets_div.find('.more').on('click', function (e) {
        $(this).siblings('.below-the-fold').show();
        $(this).hide();
    });

    self.$more_facets_div.find('.less').on('click', function (e) {
        $(this).parent().hide();
        $(this).parent().parent().find('.more').show();
    });

};

$(function() {
    $('.more-facets').each(function() {
        new MoreFacets($(this));
    });
});

它已加载到页面上，并且HTML如下所示：

<h3>Additional filters: </h3>
<dl id="facets">
    <dt>Collecting Area</dt>
      <dd> Here's Something in the list</dd>
      <dd> Here's the last in the list</dd>
        <div class="more-facets">
          <span class="more btn">&or; more</span>
          <div class="below-the-fold">
      <dd>Something That's hidden is here</dd>
      <dd>Something more in this hidden list</dd>

因此，当单击&or; more时，即是出现其他非首屏内容，这就是我要在页面加载时加载的内容。通常在页面上有一些这样的不同列表。

所以我在想我需要做的事情就是在页面加载时为所有列表运行('.below-the-fold').show()？

更新说明以澄清：现在页面加载后，它们全部被隐藏。我希望它们在页面加载时全部显示出来，因此无需单击任何东西即可显示所有内容。

基于下面另一个问题的另一条注释...它被加载在一个单独的文件中，我可以在该文件之前加载我的文件。我知道我可以覆盖页面上的其他JS，因此我想也可以覆盖此页面。

Answer 1

根据您的上一次编辑，听起来您已经在寻找解决问题的最快方法。

请注意，这仅在脚本不是异步加载的情况下才有效，但是如果您可以控制脚本的加载顺序，则可以在问题脚本和jQuery之间插入脚本。

您的脚本可以像将其使用的功能重新定义为这样的简单操作：

MoreFacets.prototype.bind_events = function() {
    var self = this;

    //Autostart in our open state without completely disabling the functionality
    self.$more_facets_div.find('.below-the-fold').show();
    self.$more_facets_div.find('.more').hide();

    self.$more_facets_div.find('.more').on('click', function (e) {
        $(this).siblings('.below-the-fold').show();
        $(this).hide();
    });

    self.$more_facets_div.find('.less').on('click', function (e) {
        $(this).parent().hide();
        $(this).parent().parent().find('.more').show();
    });
};

现在，如果您无法控制脚本加载，那将不起作用，但是即使在那种情况下，您也可能希望，因为jQuery中的文档就绪函数会按照注册时的顺序调用，所以如果您无法真正控制脚本的位置，可能会使用其他脚本来播放

$(function() {
    $('.more-facets').each(function() {
        $(this).find('.below-the-fold').show();
        $(this).find('.more').hide();
    });
});

第一个会更干净，但是第二个会在更严格的情况下进行回退，并且两者都应在不完全删除功能的情况下达到预期的效果，只需更改默认的加载状态即可。

在页面加载覆盖后显示所有隐藏的元素吗？

1 个答案: