select 메뉴 만드는중에 막히는 부분이 생겼습니다.

Question

html의 select 태그는 css로 디자인을 제어하지 못한다고 들었습니다.

그래서 ul li를 이용해서 select 메뉴를 만들어보았는데요.

다른건 다 성공했는데

첫번째 메뉴(현재 내가 선택한 메뉴가 보이는 공간)를 눌렀을때는 아무반응 없게 만드는법

다시 말해서 현재 지금 보이는 section이 보이게 냅두는 기능을 구현하는 법을 모르겠습니다.

(첫번째 li를 클릭했을때는 아무반응 없게 만들거나, 아니면 현재 보고 있는 창을 그대로 보게 만드는법 두가지로 생각해봤습니다만 둘다 실패했습니다.)

eq($(this).index()-1)의 영향으로 자꾸 가장 마지막 section이 보입니다.

한줄만 추가하면 될꺼 같은데 하려고 하는게 다 막히네요.

부디 제자에게 가르침을 주소서...

https://jsfiddle.net/jongmin/44Lutzto/

 

Answer 1

로직의 문제는 첫번째 아이템이 선택된 역할을 하는 더미라는 것입니다.

따라서 마우스 클릭 이벤트시 첫 번째 항목은 배제를 해야 합니다. 즉 첫 번째 클릭시 아무런 동작이 발생하지 않아야 한다는 것이죠. 그리고 두 번째 클릭이 정말로 아이템을 선택하는 이벤트인 셈입니다.

따라서 클릭 이벤트가 발생될 대상(선택자)만 코드를 수정하면 해결됩니다.

$('.select_ul li') 를 $('.select_ul li:not(:first)')로 수정합니다. 이 방식은 :not(부정할 선택자)를 선택합니다. 즉 첫 번째가 아닌 모든 li 요소를 선택합니다.

바뀐 코드는 다음과 같습니다.

다른 코드의 최적성은 판단하지 않았습니다.  

$(function() {
    function selectMove() {
        $('.current_content01 section').hide();
        $('.current_content01 section').first().show();


        $('.select_ul li:not(:first)').on('click', function() {

            if ($('.current_content01 section').index() == 0) {
                return false;
            } else {
                $('.current_content01 section').hide();
                $('.current_content01 section').eq($(this).index() - 1).show();
            }
        })
    }
    selectMove();
})

 

Comments

if ($('.current_content01 section').index() == 0)으로 첫번째 인덱스를 누르면 반응하지 않게 하려고 햇던건데 이중선택자로 하면 쉽게 해결될 문제였네요 감사합니다!!