проблеми з javascript, якщо і ще

У мене є елемент (nav), який прихований або показаний, коли натискається інший елемент (#aNav).

Це вже працює добре.

Але тепер я хочу, щоб цей клацаний елемент (#aNav) сам отримав певні зміни. Ці стилі також повинні бути змінені, якщо елемент (nav) буде показаний чи ні. У іншому клацанні розділ else не виконується.

Ось код:

function nav(){
$('#aNav').click(function() {

    //changes the value of left
    var $lefter = $("nav");
    $lefter.animate({
        left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    });

    left = $("nav").css("left");
    if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

    } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
            });
        }

    });
};
$(document).ready(function(){
    nav();
});

Я хочу, щоб інший розділ виконувався. Можливо, хтось може допомогти.

0
Друкарська помилка? var $ lefter = $ ("nav");//не $ ("# nav")?
додано Автор Thomas Junk, джерело
stackoverflow.com/questions/4278148/… Це може бути вашою проблемою.
додано Автор Joe Frambach, джерело
border-left бути> 0 не змінить значення лівого властивості, тому ви завжди отримаєте першу частину if ... else
додано Автор LexLythius, джерело
border-left бути> 0 не змінить значення лівого властивості, тому ви завжди отримаєте першу частину if ... else
додано Автор LexLythius, джерело
Ще дві речі: 1) припускаючи, що .css ("лівий") завжди повертає ціле ціле число крихким, і 2) оголошує змінну лівою за допомогою var left , ви ' повторно пропускає змінну до глобальної області.
додано Автор LexLythius, джерело
Незрозуміло, які проблеми ви бачите
додано Автор wilsjd, джерело
не тільки навігація без #
додано Автор Slotty Bon, джерело
не тільки навігація без #
додано Автор Slotty Bon, джерело
Я знаю, але це не має нічого спільного з, що я хочу
додано Автор Slotty Bon, джерело
Я знаю, але це не має нічого спільного з, що я хочу
додано Автор Slotty Bon, джерело

7 Відповіді

Встановіть прапорець у data() і використовуйте його, щоб відстежувати кліки, оскільки він є більш точним:

$(document).ready(function() {
    $('#aNav').on('click', function() {
        var nav  = $("nav"),
            left = !$(this).data('state') ? ~nav.outerWidth() : 0;

        nav.animate({left: left}, 600);
        $(this).data('state', !$(this).data('state'))
               .find('div').css({
                   borderRight : (left===0?33:0)+'px solid transparent',
                   borderLeft  : (left===0?0:33)+'px solid transparent',
                }
        );
    });
});
0
додано

jQuery's css() method will return the value and units of the left property, so it will never be 0: JSFiddle demo

Щоб зробити значення в лівій частині, можна скористатися parseInt , який розібратиметься до нечислового значення:

left = parseInt($("nav").css("left"), 10);

0
додано
alright, я постараюся що
додано Автор Slotty Bon, джерело
так, отримав! спасибі!
додано Автор Slotty Bon, джерело

jQuery's css() method will return the value and units of the left property, so it will never be 0: JSFiddle demo

Щоб зробити значення в лівій частині, можна скористатися parseInt , який розібратиметься до нечислового значення:

left = parseInt($("nav").css("left"), 10);

0
додано
alright, я постараюся що
додано Автор Slotty Bon, джерело
так, отримав! спасибі!
додано Автор Slotty Bon, джерело

Спробуйте, як це ..... анімація з повною може працювати .....

$lefter.animate({
    left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    },
  complete: function() {
      left = $("nav").css("left");
    if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

    } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
            });
        }

    });
    });
0
додано

Спробуйте, як це ..... анімація з повною може працювати .....

$lefter.animate({
    left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    },
  complete: function() {
      left = $("nav").css("left");
    if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

    } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
            });
        }

    });
    });
0
додано

Схоже, ви можете перевірити властивість навігації ліворуч під час анімації, в якій її не 0.

Якщо ви пересуваєте решту в повноцінну функцію на анімації, це працює? Щось подібне:

function nav(){
  $('#aNav').click(function() {
    //changes the value of left 
    var $lefter = $("nav");
    $lefter.animate({
        left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    }, function(){

      left = $("nav").css("left");
      if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

      } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
        });
      }
    });
  });
};
$(document).ready(function(){
  nav();
});

Вам також може знадобитися перевірити властивість поза функцією завершення анімації, як це було раніше

0
додано

Схоже, ви можете перевірити властивість навігації ліворуч під час анімації, в якій її не 0.

Якщо ви пересуваєте решту в повноцінну функцію на анімації, це працює? Щось подібне:

function nav(){
  $('#aNav').click(function() {
    //changes the value of left 
    var $lefter = $("nav");
    $lefter.animate({
        left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    }, function(){

      left = $("nav").css("left");
      if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

      } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
        });
      }
    });
  });
};
$(document).ready(function(){
  nav();
});

Вам також може знадобитися перевірити властивість поза функцією завершення анімації, як це було раніше

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram