2013-12-23 9 views
1

Я нашел простую плагин jQuery в виде вкладок, которая требует некоторой адаптации для моего проекта. Закладки, о которых идет речь, - будучи абсолютно позиционированными, - выводятся из потока и, как таковые, не вносят вклад в высоту оберточного div, поэтому фон позади них не отображается. Я пытаюсь заставить высоту оберточного div (содержащего фоновое изображение) соответствовать высоте выбранной вкладки (+ 400 пикселей для навигации и заголовка), и для достижения этого на лету я адаптирую исходный файл jQuery. Вот код (с несколькими лишними строками (прокомментировал 'добавлен!'))., предназначенный для дочернего объекта event.currentTarget

var cbpHorizontalMenu = (function() { 
    var $listItems = $('#cbp-hrmenu > ul > li'), 
     $menuItems = $listItems.children('a'), 
     $body = $('body'), 
     current = -1; 

    function init() { 
     $menuItems.on('click', open); 
     $listItems.on('click', function (event) { 
      event.stopPropagation(); 
     }); 
    } 

    function open(event) { 
     if (current !== -1) { 
      $listItems.eq(current).removeClass('cbp-hropen'); 
     } 
     var $item = $(event.currentTarget).parent('li'), 
      idx = $item.index(); 
     if (current === idx) { 
      $item.removeClass('cbp-hropen'); 
      //added! 
      current = -1; 
     } else { 
      $item.addClass('cbp-hropen'); 
      current = idx; 
      $body.off('click').on('click', close); 
      var content2Height = jQuery(".cbp-hrsub").height() + 400; 
      jQuery('#content2').height(content2Height); //added 
     } 
     return false; 
    } 

    function close(event) { 
     $listItems.eq(current).removeClass('cbp-hropen'); 
     //added! 
     current = -1; 
    } 
    return { 
     init: init 
    }; 
})(); 

Он делает что-то, но не то, что мне нужно. Он получает высоту сначала div.cbp-hrsub и применяет его (+ 400 пикселей) к div.content2. Мне нужно настроить таргетинг на вкладку (дочерний элемент event.currentTarget, мне кажется?), Чтобы вычислить ее высоту и применить ее к div content2.

Это упрощенный HTML, если это помогает:

<div class="content2"> 
<nav id="cbp-hrmenu" class="cbp-hrmenu"> 
    <ul> 
     <li> 
      <a href="#">tab 1</a> 
      <div class="cbp-hrsub"> 
       <div class="cbp-hrsub-inner"> 
        I am 1st tab, 100px height. 
       </div> 
      </div> 
     </li> 
     <li> 
      <a href="#">tab 2</a> 
      <div class="cbp-hrsub"> 
       <div class="cbp-hrsub-inner"> 
        I am 2nd tab, 200px height. 

       </div> 
      </div> 
     </li> 
     <li> 
      <a href="#" class="white06">Nigel's CV</a> 
      <div class="cbp-hrsub"> 
       <div class="cbp-hrsub-inner"> 
        I am 3rd tab, 300px height. 
       </div> 
      </div> 
     </li> 

    </ul> 
</nav> 

Просто чтобы прояснить, я хочу, чтобы сохранить оригинальный плагин, как это, просто чтобы вставить что-то вместо моих 2-х линий, в направлении конец файла. (Вар content2Height = JQuery ("ТПС-hrsub.") Высота() + 400;. JQuery ('# Content2') высота (content2Height). // добавил Спасибо всем за время

Зел

.

ответ

1

я получаю противоречивые результаты при ориентации родительскую-контейнер с .parent() в этой строке:.

var $item = $(event.currentTarget).parent('li'), 
     idx = $item.index(); 

Попробуйте использовать вместо .closest (!):

var $item = $(event.currentTarget).closest('li'), 
     idx = $item.index(); 

Ой, подождите я см. вопрос:

var content2Height = jQuery(".cbp-hrsub").height() + 400; 

Вы извлекаете все классифицированные элементы .cbp-hrsub. Он попытается вернуть высоту, и я не совсем уверен, как jQuery определяет, что когда он смотрит на массив, но я предполагаю, что он просто выбирает первый элемент из массива.

Что вы на самом деле нуждаются в этой точке, то, что-то вроде этого:

var content2Height = $item.first(".cbp-hrsub").height() + 400; 

Это должно дать вам высоту .cbp-hrsub, содержащейся в текущей позиции (находится выше), и а не первого .cbp-hrsub в массиве.

+0

Спасибо за ваше время. Фактически это делает то же, что и мой код. Он получает высоту вкладки FIRST независимо от того, какая клика по ссылке. Мне нужно настроить таргетинг на дочерний объект целевой ссылки. Поэтому вместо $ item.first это должно быть что-то вроде $ item.current (но это не так, я пытался). – Zel

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