我有这个JQ下拉菜单,我试图让它行为正常。它可能是一个html css问题。我一直在玩它几个小时试图让它正常工作,并得出结论我没有做对。我想学习正确的方法,而不仅仅是让它工作。菜单slidetoggle导致间距变得混乱,标题将反弹以为扩展菜单腾出空间。当我设置高度和空间以腾出空间时,没有滑块的标题将位于底部。
visable允许我显示/隐藏管理员
到目前为止我已经
了<nav>
<ul>
<li style="display: inline;"><a href="Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a>
</li>
<li style="display: inline;"><a href="Support.aspx" class="NavTitle ntAlter">Support</a>
</li>
<li runat="server" id="NavTitle1_wrap" visible="false" class="NavTitle" style="display: inline-block;">
<span id="NavTitle1"> Items </span>
<ul style="list-style-type: none;">
<li><a style="display: none;" class="subMenu1">Add</a></li>
<li><a style="display: none;" class="subMenu1">Approve</a></li>
<li><a style="display: none;" class="subMenu1">Update</a></li>
<li><a style="display: none;" class="subMenu1">Delete</a></li>
</ul>
</li>
<li runat="server" id="NavTitle2_wrap" visible="false" class="NavTitle" style="display: inline-block;">
<span id="NavTitle2"> Contacts</span>
<ul style="list-style-type: none;">
<li><a style="display: none;" class="subMenu2">Add</a></li>
<li><a style="display: none;" class="subMenu2">Approve</a></li>
<li><a style="display: none;" class="subMenu2">Update</a></li>
<li><a style="display: none;" class="subMenu2">Delete</a></li>
</ul>
</li>
</ul>
</nav>
此脚本
<script type="text/javascript">
$('#NavTitle1').hover(function () {
$('.subMenu1').stop(true, true).slideToggle('medium');
});
$('#NavTitle2').hover(function () {
$('.subMenu2').stop(true, true).slideToggle('medium');
});
</script>
答案 0 :(得分:1)
我建议阅读有关导航的嵌套列表。关于这个主题有很多文章。我引用了A List Apart: Suckerfish Dropdowns。
以下是一个工作示例:http://jsfiddle.net/pHqKC/
<nav>
<ul>
<li><a href="Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a>
</li>
<li><a href="Support.aspx" class="NavTitle ntAlter">Support</a>
</li>
<li runat="server" id="NavTitle1_wrap" visible="false" class="NavTitle">
<span id="NavTitle1" class="menu"> Items
<ul class="submenu" style="list-style-type: none;">
<li><a>Add</a></li>
<li><a>Approve</a></li>
<li><a>Update</a></li>
<li><a>Delete</a></li>
</ul>
</span>
</li>
<li runat="server" id="NavTitle2_wrap" visible="false" class="NavTitle" style="display: inline-block;">
<span id="NavTitle2" class="menu"> Contacts
<ul class="submenu" style="list-style-type: none;">
<li><a>Add</a></li>
<li><a>Approve</a></li>
<li><a>Update</a></li>
<li><a>Delete</a></li>
</ul>
</span>
</li>
</ul>
</nav>
JavaScript的:
$(document).ready(function() {
$('.menu').hover(
function() {
$(this).find('.submenu').show();
},
function() {
$(this).find('.submenu').hide();
}
);
});
查看工作链接上的CSS。我不确定这是否能解决您的问题,但我建议您开始简单并按照自己的方式努力。在你弄清楚基础知识之前,不要担心花哨的幻灯片。