0

私はJQueryが初めてです。次のリンクに示されているメニュー バーを使用しています http://tympanus.net/Tutorials/UIElements/LargeDropDown/

ソースコードは以下からダウンロードできます

http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/

コードとファイルをプロジェクトに添付しました。問題は、最初にページを開いたときに、下の画像に示すようにコンテンツが正しい方法で表示されることです

ページ読み込み時

マウスで入力すると、リスト項目が展開され、下のサブ詳細が正しく表示されます

マウス入力時

しかし、アイテムからマウスを離すと、テキストがはみ出して落ちてきます。単語が 1 つの場合は問題ありませんが、単語が 2 つ以上ある場合はこの問題が発生します。下の画像でこれを見ることができます

テキストオーバーフロー

私はまた、javascriptコードを与えています

<!-- The JavaScript -->
    <script type="text/javascript" src="Styles/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /**
            * the menu
            */
            var $menu = $('#ldd_menu');
            /**
            * for each list element,
            * we show the submenu when hovering and
            * expand the span element (title) to 510px
            */
            $menu.children('li').each(function () {
                var $this = $(this);
                var $span = $this.children('span');
                $span.data('width', $span.width());
                $this.bind('mouseenter', function () {
                    $menu.find('.ldd_submenu').stop(true, true).hide();
                    $span.stop().animate({ 'width': '510px' }, 300, function () {
                        $this.find('.ldd_submenu').slideDown(300);
                    });
                }).bind('mouseleave', function () {
                    $this.find('.ldd_submenu').stop(true, true).hide();
                    $span.stop().animate({ 'width': $span.data('width') + 'px' }, 300);
                });
            });
        });
    </script>

私を助けてくれませんか？

4

1 に答える 1

0

CSS を使用して、li ( W3School min-width ) に最小幅を追加してみてください。次のコードは、ul の後に ldd_menu という ID を持つすべての li に影響を与えます。

#ldd_menu li {
  min-width:200px
}

特定の 1 つの li だけに使用することもできます。

<li style="min-width:200px">

または、各ブロックの jquery 経由 ( jQuery CSS )

$span.css("min-width", "200px");
于 2012-12-08T10:59:01.823 に答える