Вертикальное раздвижное меню

Я создал меню. Это довольно просто, но у меня проблема, которую я до сих пор не понял.Вертикальное раздвижное меню

При загрузке страницы. Все ссылки скрыты во вкладке меню. Когда пользователь нажимает ссылки на вкладку, появляется сообщение. Но когда пользователь нажимает на любую ссылку, снова рушится. Поэтому каждый раз, когда пользователь должен щелкнуть вкладку, нажмите любую ссылку.

Я хочу, чтобы ссылки отображались до тех пор, пока пользователь не нажмет на вкладку.

Пожалуйста, проверьте мой код ниже. Пожалуйста, помогите, прошло уже два дня, я имею дело с этим.

<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

Я уже устранили, что один. Когда я обновлял тело с результатом 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

Bro вы делаете то же самое, что и я делал. После нажатия на ссылки, меню снова закрывается. – RIK

Вертикальное раздвижное меню

ответ

Смежные вопросы