수직 슬라이딩 메뉴

메뉴를 만들었습니다. 그것은 꽤 기본이지만 나는 지금까지 알아 내지 못했던 문제가 있습니다.수직 슬라이딩 메뉴

페이지가로드 될 때. 모든 링크는 메뉴 탭에 숨겨져 있습니다. 사용자가 탭 링크를 클릭하면 표시됩니다. 그러나 사용자가 링크 탭을 다시 클릭하면 다시 축소됩니다. 따라서 사용자가 탭을 클릭하여 링크를 클릭해야 할 때마다

사용자가 탭을 클릭 할 때까지 링크가 표시되기를 원합니다.

아래 코드를 확인하십시오. 제발 도와주세요. 지금 이일을 처리하고 있습니다.

<a id="doc_test" > 
    <img src="../../images/menu_icons/documents_button.png" border="0" /> 
</a> 
<br /> 
<div id="docSubLink_test" style="padding-left:10px;display: none;"> 
    <a class="" id="d1" href="#" >apple</a><br /> 
    <a class="" id="d2" href="#" >grapes</a><br /> 
    <a class="" id="d3" href="#" >orange</a><br /> 
    <a class="" id="d4" href="#" >peach</a><br /> 
</div>

자바 스크립트 :

if($('#docSubLink_test').is(':visible')) { 
    $('#doc_test').click(function(){ 
     alert('1'); 
     //$('docSubLink_test').css("display","inline"); 
     $('#docSubLink_test').slideUp(500); 
     //$('docSubLink_test').slideUp('medium'); 
    }); 
} 

if($('#docSubLink_test').is(':hidden')) { 
    $('#doc_test').click(function(){ 
     //alert('1'); 
     //$('docSubLink_test').css("display","inline"); 
     $('#docSubLink_test').show(500); 
     //$('docSubLink_test').slideUp('medium'); 
    }); 
} 

//Link to other page 
$('#d1').click(function(){ 
    $.get('http://www.abc.com/products/doc_test.php?orange',function(data){   
     $('body').html(data); 
    }); 
}); 
$('#d2').click(function(){   
    $.get('http://www.abc.com/products/doc_test.php?apple',function(data){ 
     $('body').html(data); 
    }); 
}); 
$('#d3').click(function(){ 
    $.get('http://www.abc.com/products/doc_test.php?peach',function(data){ 
     $('body').html(data); 
    }); 
}); 
$('#d4').click(function(){ 
    $.get('http://www.abc.com/products/doc_test.php?grapes',function(data){ 
     $('body').html(data); 
    }); 
});

출처

2012-04-19 RIK

전신을 ajax 결과로 바꾸고 있습니다. 따라서 메뉴와 그 밖의 모든 항목을 덮어 씁니다. 원하는 부분 만 업데이트하면됩니다. –

예 , 고맙습니다. 라이브 데모 용 – RIK

이미 한 것을 해결했습니다. 나는 아약스 결과로 몸을 상쾌하게하고 있었다. 그래서 매번 링크를 클릭하면 메뉴 자체가 포함 된 전체 본문이 새로 고쳐집니다. 그래서 메뉴가 무너집니다. 정답은 Gaby aka G. Petrioli 님의 코멘트입니다.

출처

2012-07-13 11:33:08 RIK

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#doc_test').click(function() { 
       $('#docSubLink_test').is(':visible') ? $('#docSubLink_test').slideUp(500) : $('#docSubLink_test').slideDown(500); 
      }); 

      $('.subLinkD').click(function() { 
       var obj = $(this); 

       $('#docSubLink_test').slideUp(500); 

       //    $('#loadHerfContent').load(obj.data('href'), function (response, status, xhr) { 
       //     if (status == "error") { 
       //      var msg = "Sorry but there was an error: "; 
       //      $("#loadHerfContent").html(msg + xhr.status + " " + xhr.statusText); 
       //     } 
       //    }); 

       $.get(obj.data('href'), function (data) { 
        $('#loadHerfContent').html(data); 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <a id="doc_test" style="cursor: pointer; font-size: large; font-weight: bolder;"> 
     <img src="../../images/menu_icons/documents_button.png" border="0" />Main Tab 
    </a> 
    <br /> 
    <div id="docSubLink_test" style="padding-left: 10px; display: none;"> 
     <a class="subLinkD" id="d1" href="#" data-href="http://www.abc.com/products/doc_test.php?apple"> 
      apple</a><br /> 
     <a class="subLinkD" id="d2" href="#" data-href="http://www.abc.com/products/doc_test.php?grapes"> 
      grapes</a><br /> 
     <a class="subLinkD" id="d3" href="#" data-href="http://www.abc.com/products/doc_test.php?orange"> 
      orange</a><br /> 
     <a class="subLinkD" id="d4" href="#" data-href="http://www.abc.com/products/doc_test.php?peach"> 
      peach</a><br /> 
    </div> 
    <div id="loadHerfContent"> 
    </div> 
</body> 
</html>

출처

2012-04-25 12:45:42 Thulasiram

이 링크를 참조하십시오 : http://jsfiddle.net/nanoquantumtech/7WYNq/ – Thulasiram

변경 사항이 필요하면 알려주세요 .. – Thulasiram

당신도 똑같은 일을하고 있습니다. 하위 링크를 클릭하면 메뉴가 다시 닫힙니다. – RIK

수직 슬라이딩 메뉴

답변

관련 문제