在Jquery中控制菜单文本溢出

Question

我是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>   

你能帮帮我吗???

Answer 1

您可以尝试通过CSS为您的li（W3School min-width）添加最小宽度。以下代码会影响您在ul之后使用id ldd_menu发布的所有内容。

#ldd_menu li {
  min-width:200px
}

您也可以只使用一个特定的li。

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

或通过每个区块中的jquery（jQuery CSS）

$span.css("min-width", "200px");