Question

我创建了一个菜单。这是非常基本的，但我遇到了一个我到目前为止还没有想到的问题。

页面加载时。所有链接都隐藏在菜单选项卡中。当用户单击选项卡链接时显示。但是当用户点击任何链接选项卡再次折叠时。因此，每次用户必须单击选项卡以单击任何链接。

我想要显示链接，直到用户点击标签。

请检查下面的代码。请帮忙，现在已经两天了，我正在处理这件事。

<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); 
    }); 
});

Answer 1

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

Answer 2

我已经修好了那个。因为我用ajax结果刷新了身体。所以每当我点击任何链接时，它都刷新包含菜单本身的整个身体。所以菜单崩溃了。 Gaby aka G. Petrioli在评论中给出了正确答案

垂直滑动菜单

2 个答案: