内联列表菜单无法正常工作答案

【问题标题】：Inline list menu not working properly内联列表菜单无法正常工作
【发布时间】：2012-12-05 10:01:04
【问题描述】：

我有这个 JQ 下拉菜单，我正试图让它正常运行。这可能是一个 html css 问题。我玩了几个小时试图让它正常工作，并得出结论我做得不对。我想学习正确的方法，而不是让它发挥作用。菜单滑动切换会导致间距变得混乱，并且标题会弹跳以为扩展菜单腾出空间。当我设置高度和空间以腾出空间时，没有滑动切换的标题将位于底部。

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>

【问题讨论】：

jsfiddle

标签： jquery asp.net html css

【解决方案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。我不确定这是否能解决您的问题，但我建议您从简单的开始逐步提高。在弄清楚基础知识之前，不要担心花哨的幻灯片。

【讨论】：