2016-02-23 3 views
0

У меня есть аккордеон на странице, а я нажимаю на аккордеон, мне нравится мой экран и прокручивается до вершины аккордеона. Структура аккордеона, как это:Доступ к элементу родительского градиента через его великого ребенка (jqlite)

<section id="owners-content" class="faq-section flex-container"> 
     <h2 class="heading-4 centered large-col-8 medium-col-10 small-col-4 ">"My XYZ" Owner's Info</h2> 
     <div class="accordion-container flex-container ng-scope" role="tablist" aria-live="polite" data-ng-controller="tciAccordionController"> 
      <div role="tabpanel" class="accordion" data-tci-accordion="" data-tci-accordion-event-category="faq_expan_"> 
       <ul> 
       <li class="item flex-container " data-item-id="0" data-label="how_do_i_access_club_toyota"> 
       <div class="centered large-col-8 medium-col-10 small-col-4 phone-col-4"> 
        <button class="accordion-toggle ng-scope" aria-pressed="false" aria-label="How do I access Club XYZ?" data-ng-click="vm.toggle(0)"> 
         <h4 class="accordion-header"> 
          How do I access Club XYZ? 
         <span class="accordion-arrow" data-index="0"> 
         <svg version="1.1" class="svg-arrow-container" role="img" aria-label="arrow" color-interpolation="auto" shape-rendering="auto" image-rendering="auto" text-rendering="auto" color-rendering="auto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-157 170.1 83.5 61.9" style="enable-background:new -157 170.1 83.5 61.9;" xml:space="preserve"> 
          <path role="presentation" class="st3 svg-arrow faq" d="M-77.2,204.8l-30.2-30.8c-0.3-0.3-0.5-0.6-0.8-0.9l-0.3-0.3c-3-2.9-7.5-3.5-11-1.7l0,0 
      c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0.1-0.3,0.2-0.4,0.2l-0.1,0.1c-0.5,0.3-0.9,0.7-1.3,1.1l-0.4,0.3c-0.2,0.2-0.3,0.3-0.5,0.5 
      l-30.6,31.1c-3.7,3.7-3.6,9.8,0.1,13.4l0.3,0.3c3.7,3.7,9.8,3.6,13.4-0.1l24.3-24.5l24.2,24.6c3.7,3.7,9.7,3.8,13.4,0.1l0.3-0.3 
      C-73.6,214.5-73.5,208.5-77.2,204.8z"> 
          </path> 
         </svg> 
         </span> 
         </h4> 
        </button> 
        <div class="accordion-content " aria-hidden="true"> 
         <div class="inner"> 
          <p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> 
         </div> 
        </div> 
       </div> 
       </li> 
      <li class="item flex-container " data-item-id="1" data-label="what_is_the_vehicle_identification_number"> similar repeating list .... 

подход, который я использовал

angular.element(document).scrollTop(angular.element($content.parent().parent().parent().parent().parent().parent()).prop('offsetTop') + id * item.clientHeight); 

Какой большой нет нет в команде. Есть ли какой-нибудь лучший css для того, чтобы получить этого грандиозного родителя из элемента clicked?

+0

[jQuery.closest ('селектор')] (https://api.jquery.com/closest/) – SpYk3HH

+0

@ SpYk3HH есть проблема здесь. Я работаю на угловой работе. .closest() не является обложкой в ​​jqlite. –

+0

см. Документ jqlite https://docs.angularjs.org/api/ng/function/angular.element –

ответ

1

Поскольку .closest() не доступен, вы можете сделать свой собственный:

angular.element.closest = function(a, b) { 
    for (var c = b.charAt(0); a && a !== document; a = a.parentNode) 
     if ("." === c && a.classList.contains(b.substr(1)) || "#" === c && a.id === b.substr(1) || "[" === c && a.hasAttribute(b.substr(1, b.length - 2)) || a.tagName.toLowerCase() === b) return a; 
    return !1 
}; 

Затем используйте просто:

angular.element('selector').closest('selector') 

 Смежные вопросы

  • Нет связанных вопросов^_^