Peremir2
@Peremir2

Почему при перелистывании перескакивают пункты?

Если открыть первый раз, перелистывание стрелками идет нормально по порядку. Если закрыть и снова открыть, перелистывание идет через пункт, если еще раз открыть-закрыть, то уже будет перескакивать через 2 пункта и т.д.

Я головой уже стол пробил, помогите-объясните, почему оно так перескакивает?

<div id="city"><a href="" class="main-city chosen-single"><span class="">Ростов-на-Дону</span></a></div>

<div class="all-regions" style="display: none;">
	<div class="inner">
		<div><input type="checkbox" id="delivery-other_check" style="display: none;">&nbsp;<label for="delivery-other_check">Доставка из других регионов</label></div>
		<div><input type="text" class="search-region_row" placeholder="Введите название города"></div>
		<div class="regions_area">
			<div class="regions">
				<a tabindex="1" href="/moskau" class="city active">Москва</a>
				<a tabindex="2" href="/krasnodar" class="city">Краснодар</a>
				<a tabindex="3" href="/peterburg" class="city">Санкт-Петербург</a>
				<a tabindex="4" href="/nn" class="city">Нижний Новгород</a>
				<a tabindex="5" href="/novosib" class="city">Новосибирск</a>
				<a tabindex="6" href="/ufa" class="city">Уфа</a>
				<a tabindex="7" href="/kazan" class="city">Казань</a>
				<a tabindex="8" href="/rostov" class="city">Ростов-на-Дону</a>
				<a tabindex="9" href="/samara" class="city">Самара</a>
				<a tabindex="10" href="/ekb" class="city">Екатеринбург</a>
				<a tabindex="11" href="/chelaba" class="city">Челябинск</a>
				<a tabindex="12" href="/salang" class="city">Саланг</a>
				<a tabindex="13" href="/peshevar" class="city">Пешевар</a>
				<a tabindex="14" href="/kabul" class="city">Кабул</a>
				<a tabindex="15" href="/krakov" class="city">Краков</a>
				<a tabindex="16" href="/krivbass" class="city">Кривбасс</a>
			</div>
		</div>
		<div class="more"></div>
	</div>
</div>


.regions a {
  display: none;
}
.regions a.city {
  display: block;
}
.regions a.city.active {
  background: #e1e1e1 none repeat scroll 0 0;
}


$(document).ready(function() {

    // Выбор региона
    $("#city > .main-city").click(function(event) {
        
        event.preventDefault();
        var pos = $(this).offset();
        $(".all-regions").toggle(0).css({
            top: pos.top+32,
            left: pos.left
        });
		
		// Поиск по городам при фокусе на поле поиска
		$(".regions").scrollTop(0);
		$(".search-region_row").val('').focus().keyup(function(event) {
            switch(event.keyCode) {
                case 13: {
                    document.location.href = $(".regions > a.city.active").attr('href');
                } break;
                case 38: {
                    $(".regions > a.city.active:not(:first-child)").removeClass('active').prev('.city').addClass('active');
                } break;
                case 40: {
                    $(".regions > a.city.active:not(:last-child)").removeClass('active').next('.city').addClass('active');
                } break;
            }
        });

    });

	function closePopUp(container, btn) {
		$(document).mouseup(function (event) {
			if($(container).has(event.target).length === 0) {
				$(container).hide();
			}
		});
	}
	closePopUp(".all-regions");

});
  • Вопрос задан
  • 147 просмотров
Пригласить эксперта
Ответы на вопрос 1
codepen.io
https://jsfiddle.net/

3 один и тот же вопрос от тебя и никогда не оформляешь.
Нужно реализовать список с поиском, с возможностью перелистывать пункты стрелочками. Можете подкинуть материал?
Как выбрать следующий пункт в списке?
Почему при перелистывании перескакивают пункты?

Вообще почитай ОПП, логику в программировании.

UPD. Даю подсказку, проблема в этом месте
$("#city > .main-city").click(function(event) {
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы