JQuery Accordian - URL이 DIV 내에서 DIV를 확장합니다.

Question

나는이 머리로 내 머리를 때리고 있었고 스택 오버플로와 다른 곳에서 검색했습니다. 내가 찾은 가장 가까운 대답은 Expand Specific Accordion from URL이지만 내 사이트에서 제대로 작동하지 않습니다.

다른 페이지/사이트에서 www.xyz.com/page#weather와 같은 앵커로 URL을 입력하고 다른 li의 내부에있는 li를 자동으로 이동하여 확장하게하고 싶습니다. href = # abc에 #abc를 추가 한 다음 포함 된 URL과 유사한 코드를 시도했습니다. 나는 내가 원하는 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(); 
}); 

Answer 1

내가 만난 여러 가지 것들을 테스트 한 결과입니다. 다음 형식으로 URL을 입력하면 상위 아코디언 내 특정 아코디언을 확장 할 수 있습니다. example.com/page#abc & def

각 상위 아코디언에 요소 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(); 
} 

Answer 2

나는 최근이 직면 한 :

여기

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

는 아코디언 스크립트입니다. 여기에이 해결 방법은 다음과 같습니다

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

을 그리고 이것은 당신이 필요합니다 자바 스크립트의 조각 :

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

이 바로 그때, 당신의 UL 요소에 id=deep-link를 추가 자신을 사용 .responsive-accordion-panel 및 'active' 교체 구조.