0

我是 JQuery 的新手。我正在使用以下链接 http://tympanus.net/Tutorials/UIElements/LargeDropDown/中显示的菜单栏

源代码可以从这里下载

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

我已将代码和文件附加到我的项目中。问题是当我第一次打开页面时，它以正确的方式显示内容，如下图所示

页面加载时

并在鼠标上输入列表项展开并正确显示下面的子详细信息

鼠标输入

但是当我将鼠标从项目上移开时，文本会溢出并下降。如果它是一个单词，那么没有问题，但是如果有两个或多个单词，就会发生这种情况。您可以在下图中看到这一点

文本溢出

我还提供了 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 ) 添加一个 min-width 。以下代码会影响您在 ul 之后使用 id 为 ldd_menu 的所有 li。

#ldd_menu li {
  min-width:200px
}

您也可以仅用于一个特定的 li。

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

或通过每个块中的 jquery ( jQuery CSS )

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