Question

我有这个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>

Answer 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。我不确定这是否能解决您的问题，但我建议您开始简单并按照自己的方式努力。在你弄清楚基础知识之前，不要担心花哨的幻灯片。

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

1 个答案: