垂直滑動菜單

我創建了一個菜單。這是非常基本的，但我有一個問題，迄今爲止我還沒有弄清楚。垂直滑動菜單

頁面加載時。所有鏈接都隱藏在菜單選項卡中。當用戶點擊標籤鏈接時出現。但是當用戶點擊任何鏈接選項卡時再次崩潰。所以每次用戶必須點擊該標籤才能點擊任何鏈接。

我想要顯示的鏈接，直到用戶點擊選項卡。

請檢查下面的代碼。請幫忙，現在我已經過了兩天的時間了。

<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>

的Javascript：

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結果替換全身...所以菜單和其他所有內容都被覆蓋..您只需更新所需的部件 – 2012-04-19 13:36:47

是，非常感謝你。 – RIK 2012-04-20 02:48:33

我已經固定的一個。當我用ajax結果刷新身體時。所以每次我點擊任何鏈接都會刷新包含菜單本身的全部內容。所以菜單崩潰了。正確的答案是由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 2012-04-25 12:48:00

如果你需要任何改變告訴我.. – Thulasiram 2012-04-25 12:48:19

兄弟你正在做同樣的事情，我正在做。點擊子鏈接後，菜單再次關閉。 – RIK 2012-04-26 03:41:30

垂直滑動菜單

回答

相關問題