垂直スライドメニュー

私はメニューを作成しました。それはかなり基本的ですが、私は今までには分かっていない問題があります。垂直スライドメニュー

ページが読み込まれるとき。すべてのリンクはメニュータブで非表示になっています。ユーザーがタブリンクをクリックすると表示されます。しかし、ユーザーがリンクタブを再度クリックすると、再び折りたたまれます。だから毎回、ユーザーがタブをクリックしてリンクをクリックする必要があります。

ユーザーがタブをクリックするまでリンクを表示します。

以下のコードを確認してください。助けてください、それは私がこれに対処している2日後です。

<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の結果で全身を置き換えています...メニューとそれ以外のものはすべて上書きされます..あなたは必要な部分だけ更新する必要があります –

はい、どうもありがとうございました。 – RIK

私はすでに1つを固定しています。私は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

変更が必要な場合は教えてください。 – Thulasiram

あなたは私がやっていたのと同じことをしています。サブリンクをクリックすると、メニューが再び閉じます。 – RIK

答えて

関連する問題