javascript - JQuery Accordion - 使用 URL 在 DIV 内扩展 DIV

Question

我一直在用这个解决问题，并且我已经上下搜索了堆栈溢出和其他地方。我找到的最接近的答案是 Expand Specific Accordion from URL但我无法让它在我的网站上运行。

我想从另一个页面/站点输入带有 anchor 的 URL，例如 www.xyz.com/page#weather，并让它自动转到并展开一个 li，该 li 位于另一个 li 内部。我尝试将 #abc 添加到 href=#abc，然后尝试类似于包含的 URL 的代码。我尝试将 id 添加到我需要的 li 中。下面的代码基于当前的实时结构。我不想在寻求帮助时因为改变它并弄得一团糟而让自己和其他人感到困惑。我继承了这段代码，现在无法对其进行彻底修改。

感谢您提供的任何帮助。

页面结构为:

<ul data-ui="accordian">
  <li data-ui="expandable">
    <a href="#" class="Toggle">Main accordion title here</a>
    <div class="content">
      <ul data-ui="accordian">

        <li data-ui="expandable">
          <a href="#" class="toggle">Inner accordion title to expand</a>
          <div class="content">
            <p>some text here</p>
          </div>
        </li>

        ...

        ...

      </ul>
    </div>
  </li>
</ul>

这是 Accordion 脚本:

(function($) {

    $.Expandable = function(el, options) {

        /**
         * Default settings
         * @access private
         * @type {Object}
         */
        var defaults = {

        };

        /**
         * Current instance
         * @access private
         * @type {*}
         */
        var plugin = this;

        /**
         * Plugin settings, defaults merged with user options
         * @access public
         * @type {Object}
         */
        plugin.settings = {};

        /**
         * Reference to the jQuery version of the DOM element
         * @access private
         * @type {Object}
         */
        var $element = $(el);

        /**
         * Reference to the DOM element
         * @access private
         * @type {Object}
         */
        var element = el;

        /**
         * The control that toggles open/close state
         * @access private
         * @type {*}
         */
        var title = $element.find('>.toggle');

        /**
         * All pages
         * @access private
         * @type {*}
         */
        var content = $element.find('>.content');

        var siblings;

        /**
         * Constructor
         * @access public
         */
        plugin.init = function() {

            plugin.settings = $.extend({}, defaults, options);

            title.on('click', function(e) {

                e.preventDefault();

                if($element.hasClass('open')) {
                    content.slideUp('fast');
                    $element.removeClass('open');
                    return;
                }

                content.slideDown('fast');
                $element.addClass('open');
            });

            if($element.hasClass('open')) {
                content.slideDown('fast');
            }
        };

        // Call constructor
        plugin.init();
    };


    // Add the plugin to the jQuery.fn object
    $.fn.Expandable = function(options) {
        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {

            var $this = $(this);

            if(undefined == $this.data('Expandable')) {
                var plugin = new $.Expandable(this, options);
                $this.data('Expandable', plugin);
            }

            if(typeof options == 'string') {
                $this.data('Expandable')[options]();
            }

        });
    }

})(jQuery);

$(document).ready(function() {
    $('[data-ui="expandable"]').Expandable();
});

Answer 1

我最近就遇到过这个问题。这是我解决这个问题的方法:

barentsre.com/line-of-business/#general-aviation

这就是您需要的 JavaScript 片段:

var active = 1;
    var hash = document.location.hash;
    console.log(hash);

    if (hash.length > 0) {
        var section = $("#deep-link").children("li" + hash);
        var thisPanel = section.children(".responsive-accordion-panel");
        if (section.length) {
            active = section.index();
        }
        thisPanel.addClass('active').slideDown();
    }

只需将 id=deep-link 添加到您的 UL 元素，然后使用您的替换 .responsive-accordion-panel 和 'active'自己的结构。