화살표가있는 가로 메뉴 선택 가능한 항목

Question

메뉴에서 항목을 클릭하거나 메뉴에서 화살표 항목을 사용하여 이동하는 메뉴를 만들고 있습니다. 잘. 그들은 표시되지 않습니다 (

$('.mainSlider li:not(.leftBounce,.rightBounce)'); //All li items inside mainSlider without leftBounce and rightBounce classes 

문제가 leftBounce 및 rightBounce 화살표 항목도 표시되어 있었다 :이 선택와 복구 설정에서 선택한 클래스를 사용하여 선택한 항목을 표시 이전 세트 그래서 나는 이것에 대해 혼란 스러워요.)

다음 항목이 있습니다. <ul>입니다.

var mainli = $('.mainSlider li:not(.leftBounce,.rightBounce)'); 
var mainliSelected; 
var mainLeftBounce = $('.mainSlider .leftBounce'); 
var mainRightBounce = $('.mainSlider .rightBounce'); 

/* Main Right Navigation*/ 
mainRightBounce.click(function(){ 
    if(mainliSelected){ 
     mainliSelected.removeClass('selected'); 
     next = mainliSelected.next(); 
     if(next.length > 0){ 
      mainliSelected = next.addClass('selected'); 
     }else{ 
      mainliSelected = mainli.eq(0).addClass('selected'); 
     } 
    }else{ 
     mainliSelected = mainli.eq(0).addClass('selected'); 
    } 
}); 
/* Main Right Navigation*/ 

/* Main Left Navigation*/ 
mainLeftBounce.click(function(){ 
    if(mainliSelected){ 
     mainliSelected.removeClass('selected'); 
     next = mainliSelected.prev(); 
     if(next.length > 0){ 
      mainliSelected = next.addClass('selected'); 
     }else{ 
      mainliSelected = mainli.last().addClass('selected'); 
     } 
    }else{ 
     mainliSelected = mainli.last().addClass('selected'); 
    } 
}); 
/* Main Left Navigation*/ 

다음의 예와 바이올린 : https://jsfiddle.net/zomoxp9L/

Answer 1

는 두 가지를 수행하고 예상대로 작동합니다

<ul> 
    <li class="leftBounce"><span class="spanBig"> < </span></li> 
    <li><span class="spanBig">A</span><span class="spanMedium">ROW</span><span class="spanMedium">GREENS</span></li> 
    <li><span class="spanBig">B</span><span class="spanMedium">ROW</span><span class="spanMedium">LIGHTS</span></li> 
    <li><span class="spanBig">C</span><span class="spanMedium">ROW</span><span class="spanMedium">GOLD/BROWN</span></li> 
    <li><span class="spanBig">D</span><span class="spanMedium">ROW</span><span class="spanMedium">BLUE</span></li> 
    <li><span class="spanBig">E</span><span class="spanMedium">ROW</span><span class="spanMedium">BLACK</span></li> 
    <li class="rightBounce"><span class="spanBig"> > </span></li> 
</ul> 

나는 다음 JS 코드를

메인 오른쪽 탐색 기능 있음 :

주요 왼쪽 탐색 기능에서

next = mainliSelected.next().not('.rightBounce'); 

는

는

next = mainliSelected.prev().not('.leftBounce'); 

업데이트 바이올린 참조 : https://jsfiddle.net/zomoxp9L/