Jquery 메뉴 첫 번째 클릭하여 표시 두 번째 클릭하여 메뉴 숨기기

라가

다음은 내 Jquery Ajax 메뉴 코드입니다.

$(document).ready(function(){    
    $('#electronics').on('click',function(e){   

        $.ajax({
                    url:'<?php echo HTTP; ?>in_megaM.php',
                    type:'POST',
            cache:false,
                    data: 'electronics=yes',
            success:function(data){
            $('#showmenus').show();
            $('#showmenus').html(data); 
            }

        });
    });
});

$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest('#showmenus').length === 0 ) {
        $('#showmenus').hide();
    }
});


$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $('#showmenus').hide();
    //alert(1);
    }
});

<ul class="menu"> 
<li class="nodrop"><a href="<?php echo HTTP; ?>"><span class="homeIC">&nbsp;</span></a></li>
<li class="nodrop"><a href="#" id="electronics">Electronics</a></li>    
<li class="nodrop"><a href="#" id="storage">Storage</a></li>
<li class="nodrop"><a href="#" id="entertainment">Entertainment</a></li>
<li class="nodrop"><a href="#" id="lifestyle">Lifestyle</a></li>    
<li class="nodrop"><a href="<?php echo HTTP; ?>coupons/coupons-home.php">Coupons</a></li>
</ul> 
<div id="showmenus"></div>

문제는 전자 제품 탭을 클릭하면 메뉴가 열립니다. 다시 전자 제품 탭을 클릭하면 메뉴가 숨겨지지 않습니다. 대신 다시 열립니다.

Duckbrain

왜 거기에 PHP가 있는지 모르겠습니다. 서버에서 실행되도록 보내지 않기를 바랍니다.하지만 전자 탭을 클릭했을 때 당신이 지시 한대로 정확히하고 있습니다. 문서도 마찬가지입니다. 그것이 닫히고 다시 열리는 이유입니다. (물론 ajax 호출이 스위치를 볼 수있는 이유입니다.)

클래스 또는 데이터 속성의 형태로 토글 플래그를 추가해보십시오.

$('#electronics').on('click',function(e){   

    if (menus.hasClass('open')) {
        menus.hide();
        menus.removeClass('open');
    } else {
        $.ajax({
           url:'<?php echo HTTP; ?>in_megaM.php',
            type:'POST',
            cache:false,
            data: 'electronics=yes',
            success:function(data){
                var menus = $('#showmenus');
                menus.show();
                menus.html(data); 
                menus.addClass('open');
            }
        });
    }
});

$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest('#showmenus').length === 0 ) {
        $('#showmenus').removeClass('open');
        $('#showmenus').hide();
    }
});


$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $('#showmenus').removeClass('open');
        $('#showmenus').hide();
    //alert(1);
    }
});

다른 방법을 통해 닫을 때 플래그를 해제해야합니다. 이렇게하면 단순히 메뉴를 닫는 경우 AJAX 호출이 전혀 발생하지 않습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

두 번째 클릭시 메뉴가 숨겨지지 않음

분류에서Dev

첫 번째 클릭 숨기기, 두 번째 클릭 다시 표시

분류에서Dev

첫 번째 클릭 후 메뉴 항목에서 반복하기 위해 표시 / 숨기기를 할 수 없습니다.

분류에서Dev

jquery를 사용하여 두 번째 클릭마다 작동하는 메뉴 토글

분류에서Dev

jquery로 메뉴 div를 애니메이션하고 클릭 한 번으로 표시 / 숨기기

분류에서Dev

두 번째 상위 메뉴를 클릭하면 하위 메뉴를 표시하고 이전에 클릭 한 상위 메뉴의 하위 메뉴를 숨 깁니다.

분류에서Dev

JQuery 애니메이션은 첫 번째 클릭시 이동하지만 두 번째 클릭시 이동하지 않습니다.

분류에서Dev

두 번째 하위 메뉴 전환

분류에서Dev

첫 번째 모달을 숨기고 클릭 기능에 두 번째 모달 표시

분류에서Dev

첫 번째 클릭시 div를 확장하고 jQuery를 사용하여 두 번째 클릭시 div 페이드 아웃

분류에서Dev

첫 번째 메뉴에서 사용자 선택에 따라 두 번째 메뉴에 옵션 표시

분류에서Dev

다른 메뉴 항목의 버튼 (첫 번째의 '사촌')을 jQuery없이 자바 스크립트로 클릭하면 한 메뉴 항목의 하위 메뉴 닫기

분류에서Dev

다른 메뉴 항목의 버튼 (첫 번째의 '사촌')을 jQuery없이 자바 스크립트로 클릭하면 한 메뉴 항목의 하위 메뉴 닫기

분류에서Dev

두 번째 클릭시 하위 div 숨기기

분류에서Dev

Tkinter 첫 번째 클릭 첫 번째 기능, 두 번째 클릭 두 번째 기능

분류에서Dev

첫 번째 두 번 클릭하는 Chrome

분류에서Dev

내 탐색 모음에서 두 번째 클릭시 부트 스트랩 드롭 다운 메뉴를 숨기는 방법은 무엇입니까?

분류에서Dev

버튼 클릭시 두 번째 양식 숨기기 및 표시

분류에서Dev

jQuery를 사용하여 첫 번째 선택 목록 옵션을 기반으로 두 번째 필드 표시

분류에서Dev

첫 번째 버튼 숨기기 onclick 두 번째 표시, 두 번째 onclick 숨기기 첫 번째 버튼 표시

분류에서Dev

Ajax 및 Django로 두 번째 클릭 후 Div 표시 / 숨기기

분류에서Dev

첫 번째 선택 메뉴에 따라 두 번째 선택 메뉴 변경

분류에서Dev

Vba 셀을 두 번 클릭하여 강조 표시 한 다음 다른 셀을 두 번 클릭하면 첫 번째 셀 강조 표시가 제거됩니다.

분류에서Dev

jQuery 함수 실행하려면 두 번 클릭해야하지만 첫 번째 div가 표시되기를 원합니다.

분류에서Dev

클릭 기능 내부를 클릭하면 경고 메시지가 두 번 이상 표시됨-Jquery / Javascript

분류에서Dev

jquery 클릭 이벤트를 사용하여 첫 번째 클릭시 발생하지 않는 텍스트 교체

분류에서Dev

오버레이 클릭시 메뉴 닫기는 한 번 클릭하는 대신 두 번 클릭해야합니다.

분류에서Dev

HowTo : 첫 번째 클릭 애니메이션 1, 두 번째 클릭 애니메이션 2

분류에서Dev

여러 메시지를 연 후 첫 번째 메시지 읽기

Related 관련 기사

  1. 1

    두 번째 클릭시 메뉴가 숨겨지지 않음

  2. 2

    첫 번째 클릭 숨기기, 두 번째 클릭 다시 표시

  3. 3

    첫 번째 클릭 후 메뉴 항목에서 반복하기 위해 표시 / 숨기기를 할 수 없습니다.

  4. 4

    jquery를 사용하여 두 번째 클릭마다 작동하는 메뉴 토글

  5. 5

    jquery로 메뉴 div를 애니메이션하고 클릭 한 번으로 표시 / 숨기기

  6. 6

    두 번째 상위 메뉴를 클릭하면 하위 메뉴를 표시하고 이전에 클릭 한 상위 메뉴의 하위 메뉴를 숨 깁니다.

  7. 7

    JQuery 애니메이션은 첫 번째 클릭시 이동하지만 두 번째 클릭시 이동하지 않습니다.

  8. 8

    두 번째 하위 메뉴 전환

  9. 9

    첫 번째 모달을 숨기고 클릭 기능에 두 번째 모달 표시

  10. 10

    첫 번째 클릭시 div를 확장하고 jQuery를 사용하여 두 번째 클릭시 div 페이드 아웃

  11. 11

    첫 번째 메뉴에서 사용자 선택에 따라 두 번째 메뉴에 옵션 표시

  12. 12

    다른 메뉴 항목의 버튼 (첫 번째의 '사촌')을 jQuery없이 자바 스크립트로 클릭하면 한 메뉴 항목의 하위 메뉴 닫기

  13. 13

    다른 메뉴 항목의 버튼 (첫 번째의 '사촌')을 jQuery없이 자바 스크립트로 클릭하면 한 메뉴 항목의 하위 메뉴 닫기

  14. 14

    두 번째 클릭시 하위 div 숨기기

  15. 15

    Tkinter 첫 번째 클릭 첫 번째 기능, 두 번째 클릭 두 번째 기능

  16. 16

    첫 번째 두 번 클릭하는 Chrome

  17. 17

    내 탐색 모음에서 두 번째 클릭시 부트 스트랩 드롭 다운 메뉴를 숨기는 방법은 무엇입니까?

  18. 18

    버튼 클릭시 두 번째 양식 숨기기 및 표시

  19. 19

    jQuery를 사용하여 첫 번째 선택 목록 옵션을 기반으로 두 번째 필드 표시

  20. 20

    첫 번째 버튼 숨기기 onclick 두 번째 표시, 두 번째 onclick 숨기기 첫 번째 버튼 표시

  21. 21

    Ajax 및 Django로 두 번째 클릭 후 Div 표시 / 숨기기

  22. 22

    첫 번째 선택 메뉴에 따라 두 번째 선택 메뉴 변경

  23. 23

    Vba 셀을 두 번 클릭하여 강조 표시 한 다음 다른 셀을 두 번 클릭하면 첫 번째 셀 강조 표시가 제거됩니다.

  24. 24

    jQuery 함수 실행하려면 두 번 클릭해야하지만 첫 번째 div가 표시되기를 원합니다.

  25. 25

    클릭 기능 내부를 클릭하면 경고 메시지가 두 번 이상 표시됨-Jquery / Javascript

  26. 26

    jquery 클릭 이벤트를 사용하여 첫 번째 클릭시 발생하지 않는 텍스트 교체

  27. 27

    오버레이 클릭시 메뉴 닫기는 한 번 클릭하는 대신 두 번 클릭해야합니다.

  28. 28

    HowTo : 첫 번째 클릭 애니메이션 1, 두 번째 클릭 애니메이션 2

  29. 29

    여러 메시지를 연 후 첫 번째 메시지 읽기

뜨겁다태그

보관