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 に答える