Question

我一直在用这个打我的脑袋，我在堆栈溢出和其他地方上下搜索。我找到的最接近的答案是Expand Specific Accordion from URL，但我无法使用我的网站。

我想从其他网页/网站输入一个像www.xyz.com/page#weather这样的锚点的网址，让它自动转到并展开另一个li里面的li。我已经尝试将#abc添加到href =＃abc，然后尝试类似于包含的URL的代码。我已经尝试将id添加到我需要的li中。下面的代码基于现在的实时结构。我不想在尝试获得帮助时通过更改和混乱来混淆自己和他人。我继承了这段代码，现在正在进行大修，这不是一个选择。

感谢您提供的任何帮助。

页面结构为：

(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();
});

这是手风琴剧本：

{{1}}

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'。

Answer 2

这是我在测试我遇到的不同事物后想出的。它允许我输入以下形式的URL，这将扩展父手风琴中的特定手风琴：example.com/page#abc&def

我为每个父手风琴添加了一个元素id，然后为每个子手风琴添加了一个元素id。这允许我指定要扩展的手风琴，无论是父级还是子级，然后滚动到父元素。这可能不是最漂亮的，但我正在努力学习。我为自己的无知道歉。

// get URL
var url = document.location.toString();

// check for char in URL
if ( url.match('#')) {
    if (url.match('&')) {
        var main=url.substring(url.lastIndexOf('#')+1,url.lastIndexOf('&'));
        var sub=url.substring(url.lastIndexOf('&')+1);
        $('#' + sub).addClass('open');
    } else {
        var main=url.substring(url.lastIndexOf('#')+1);
    }

    $('#' + main).addClass('open');

    // scroll to expanded main panel
    document.getElementById(main).scrollIntoView();
}

JQuery Accordian - 使用URL在DIV中扩展DIV

2 个答案: