마우스 이벤트 제이쿼리 채택완료

이미지가 6개정도있는데

클릭하면 바뀌게할라고하는데여 바뀌긴합니다. 근대 hide로 두번클릭해야 사라집니다 그리고 처음에 이미지가 6개다있으니깐 보기싫어서여. 처음부터 하나만있고 클릭할때마다 바뀌고싶네여

<script>

$(document).ready(function(){ //DOM이 준비되고

    $('#toggleButton').click(function(){ // ID가 toggleButton인 요소를 클릭하면

        var state = $('#moreMenu').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'

        if(state == 'none'){ // state가 none 상태일경우 

            $('#moreMenu').show(); // ID가 moreMenu인 요소를 show();

        }else{ // 그 외에는

            $('#moreMenu1').hide(); // ID가 moreMenu인 요소를 hide();         

        }

    });

});

</script>

<script>

$(document).ready(function(){ //DOM이 준비되고

    $('#toggleButton1').click(function(){ // ID가 toggleButton인 요소를 클릭하면

        var state = $('#moreMenu1').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'

        if(state == 'none'){ // state가 none 상태일경우 

            $('#moreMenu1').show(); // ID가 moreMenu인 요소를 show();

        }else{ // 그 외에는

            $('#moreMenu').hide(); // ID가 moreMenu인 요소를 hide();         

        }else{

        $('#moreMenu1').hide(); // ID가 moreMenu인 요소를 hide();

        }

    });

});

</script>

<script>

$(document).ready(function(){ //DOM이 준비되고

    $('#toggleButton2').click(function(){ // ID가 toggleButton인 요소를 클릭하면

        var state = $('#moreMenu2').css('display'); // state 변수에 ID가 moreMenu인 요소의 display의 속성을 '대입'

        if(state == 'none'){ // state가 none 상태일경우 

            $('#moreMenu2').show(); // ID가 moreMenu인 요소를 show();

        }else{ // 그 외에는

            $('#moreMenu1').hide(); // ID가 moreMenu인 요소를 hide();         

        }

    });

});

</script>

<img src="/img/main/main_01.jpg" style="width: 550px;height: 350px">

<img src="/img/main/icon3.png" style="margin-top: -685px; margin-left: 620px;" />

<div id="toggleButton" style="margin-top: 20px">

<img src="/img/main/on_1.png" style="margin-top: -640px;margin-left: 560px"/>

</div>

<div id="toggleButton1">

<img src="/img/main/on_2.png" style="margin-top: -640px; " />

</div>

<div id="toggleButton2">

<img src="/img/main/on_3.png" style="margin-top: -500px;margin-left: -175px"/>

<img src="/img/main/on_4.png" style="margin-top: -500px" />

<img src="/img/main/on_5.png"  style="margin-left: -175px; margin-top: -360px"/>

<img src="/img/main/on_6.png" style="margin-top: -360px"/>

</div>

<div id="moreMenu">

<img src="/img/main/show_1.png" />

</div>

<div id="moreMenu1">

<img src="/img/main/show_2.png"  />

</div>

<div id="moreMenu2">

<img src="/img/main/show_3.png"  />

</div>