0

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

可见允许我为管理员显示/隐藏

到目前为止我有

<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>
4

1 回答 1

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

于 2012-12-05T02:01:04.030 回答