Question

我正在使用superfish和supersubs插件插件进行主导航。除了一个小问题外，这完美无缺。一些Submenu-UL包含字体图标，嵌入在i-tag中，而其他则不包含。我认为，问题是，超级插件读取页面加载时UL的宽度，此时不加载图标。因此，由于子菜单太小，脚本会获得错误的UL宽度，从而导致换行。

现在我正在尝试检查子菜单-U1是否包含字体图标，并且想要在图标的情况下为特定的UL添加一些额外的宽度。

下面你看到我的代码介于中间的超级插件插件，这是无效的。代码放在“each”-lop中，读取包含它的孩子的everey UL并为元素添加一些CSS以获得UL宽度。

如何判断UL是否包含i-tag？

感谢
卢卡斯

// Initialize Supersubs Plugin
function supersubs_init(){
    $(document).ready(function(){
        $("ul.sf-menu").supersubs({
            minWidth:    13,
            maxWidth:    25,
            extraWidth:  1
        });
    });
}

jQuery(function($){

$.fn.supersubs = function(options){
    var opts = $.extend({}, $.fn.supersubs.defaults, options);
    // return original object to support chaining
    return this.each(function() {
        // cache selections
        var $$ = $(this);
        // support metadata
        var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
        // get the font size of menu.
        // .css('fontSize') returns various results cross-browser, so measure an em dash instead
        var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
            'padding' : 0,
            'position' : 'absolute',
            'top' : '-999em',
            'width' : 'auto'
        }).appendTo($$).width(); //clientWidth is faster, but was incorrect here
        // remove em dash
        $('#menu-fontsize').remove();
        // cache all ul elements
        $ULs = $$.find('ul');
        // loop through each ul in menu
        $ULs.each(function(i) {
            var $s_ul = $ULs;
            // cache this ul
            var $ul = $ULs.eq(i);
            // get all (li) children of this ul
            var $LIs = $ul.children();
            // get all anchor grand-children
            var $As = $LIs.children('a');
            // force content to one line and save current float property
            var liFloat = $LIs.css('white-space','nowrap').css('float');
            // remove width restrictions and floats so elements remain vertically stacked
            // check if font icons are being displayed and add extra width
            var emWidth = $ul.add ($LIs).add($As).css({
                'float' : 'none',
                'width' : 'auto'
            })
            // this ul will now be shrink-wrapped to longest li due to position:absolute
            // so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
            .end().end()[0].clientWidth / fontsize;
            // add more width to ensure lines don't turn over at certain sizes in various browsers


            // !!! THIS IS NOT WORKING !!!
            if($($ULs + 'i[class^="icon-"]').length != 0){
                emWidth += o.extraWidth + 1.25;
            }
            else{
                emWidth += o.extraWidth;
            }

            // restrict to at least minWidth and at most maxWidth
            if (emWidth > o.maxWidth)       { emWidth = o.maxWidth; }
            else if (emWidth < o.minWidth)  { emWidth = o.minWidth; }
            emWidth += 'em';
            // set ul to width in ems
            $ul.css('width',emWidth);
            // restore li floats to avoid IE bugs
            // set li width to full width of this ul
            // revert white-space to normal
            $LIs.css({
                'float' : liFloat,
                'width' : '100%',
                'white-space' : 'normal'
            })
            // update offset position of descendant ul to reflect new width of parent
            .each(function(){
                var $childUl = $('>ul',this);
                var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
                $childUl.css(offsetDirection,emWidth);
            });
        });

    });
};
// expose defaults
$.fn.supersubs.defaults = {
    minWidth        : 13,       // requires em unit.
    maxWidth        : 25,       // requires em unit.
    extraWidth      : 2         // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
};
});

Answer 1

var i = $('#ul-id').find('i');
if(i.length > 0)
{
  alert('hey i have i tag inside');
}

Answer 2

为了记录，这个CSS规则可能已经完成了。（未测试）

ul.sf-menu > li [class^="icon-"] {
  display: inline-block;
  width: 1.25em;
}

<强>更新

根据OP，这对他有用：

ul.sf-menu > li [class^="icon-"] {
  margin-right: 4px;
  display: inline-block;
  vertical-align: baseline;
}

检查导航中的<ul>是否包含<i>元素</i> </ul>

2 个答案: