jQuery оживить проблему, решение добавлено - PullRequest
Новая
       20

jQuery оживить проблему, решение добавлено

1 голос
/ 31 августа 2011

Я работаю над навигационным меню, структура разметки ниже, элемент span добавлен в document.ready: - 

<ul id="menu">
        <li class="menu act">Additional Fixture<span class="active"></span></li>
        <li class="menu">list with sub menu
            <ul class="sub-menu">
                <li class="menu">Option one</li>
            <li class="menu">Option two</li>
            <li class="menu">Option three</li>
            <li class="menu">Option four</li>
            <li class="menu">Option five</li>
        </ul>
    </li>
    <li class="menu"">Special Tricast</li>

Диапазон расположен абсолютно с наборомширина и высота и содержит изображение стрелки в качестве фона.

Я использую jQuery для анимации изображения диапазона / стрелки, когда пользователь нажимает на класс меню, чтобы переместить активный диапазон за выбранным меню (li)элемент в качестве визуального индикатора для их выбора.

Это прекрасно работает, когда active (act) установлен в корне li, но если он расположен где-либо еще в списке, например: - 

<ul id="menu">
        <li class="menu">Additional Fixture<span class="active"></span></li>
        **<li class="menu act">list with sub menu</li>**
</ul>

Стрелка позиционируется правильно, когда документ загружается, но не переходит к правильному выбору при нажатии пользователем.Я пробовал и положение, и смещение для моей переменной divLocation, и в настоящее время я использую положение, так как смещение не работает даже в корне.пользователь перешел на, поэтому анимация должна работать с любой начальной позиции независимо от длины или позиции списка.

Я пробирался по форумам и пробовал несколько вещей, но я ошеломлен, если честнои был бы очень признателен за любую помощь !!

Ниже приведен код jQuery для анимации изображения пролета / стрелки: - 

var divLocation = $(this).position();

$("span.active").animate({
  'top': divLocation.top + topOffset,
      'left': divLocation.left + leftOffset

}, animationSpeed, "linear", function(){ 

$(selectedElement).addClass("text-light"); 
    $(selectedElement).fadeTo("100", opacityIn);


});

Ответы [ 2 ]

1 голос
/ 02 сентября 2011

Решение:

Я начал играть с кодом, приведенным ниже, и понял, что усложняю себе жизнь, вложив диапазон, содержащий изображение стрелки, в сами элементы li.Это сделало текущий элемент li всегда позицией 0 для диапазона, так что если бы он находился в узле 3, идущем к узлу 1, ему пришлось бы перейти к минусам.переместилась в начало моего неупорядоченного списка и использовала jQuery .css, чтобы установить начальную позицию изображения при загрузке страницы.Таким образом, мне совсем не нужно было менять код анимации или связываться с уравнениями .. математика никогда не была моей сильной стороной;)

Рабочее решение можно увидеть здесь (http://www.kryptonite -dove.com / sandbox/menu/fix.html) спасибо за помощь!

1 голос
/ 01 сентября 2011

Я не уверен, есть ли у меня проблема, но проверьте, есть ли в подменю li "position: родственник". Это может быть причиной, если диапазон не правильно расположен.

UPDATE

Думаю, вам следует немного переписать сценарий. 

// set height of the main links
var mainLinksHeight = 35;

// get index of the clicked element
var nextLink;

$('#menu li').click(function () {
    nextLink = $(this).index();
    $("span.active").animate({ top: nextLink * mainLinksHeight }, animationSpeed, "linear");
});

Надеюсь, вы сможете изменить этот базовый код в соответствии с вашими потребностями.

...