我创建了一个菜单。这是非常基本的,但我遇到了一个到目前为止我还没有弄清楚的问题。
页面加载时。所有链接都隐藏在菜单选项卡中。当用户单击选项卡链接时显示。但是当用户单击任何链接选项卡时再次折叠。因此,每次用户都必须单击选项卡才能单击任何链接。
我希望在用户单击选项卡之前显示链接。
请在下面检查我的代码。请帮忙,这已经两天了,我正在处理这个问题。
<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);
});
});