Question

我找到了一个简单的标签菜单jQuery插件，需要一些适应我的项目。有问题的标签 - 绝对定位 - 从流程中取出，因此不会影响包装div的高度，因此它们背后的背景不显示。我试图强制包装div（包含背景图像）的高度匹配所选选项卡的高度（导航和标题+ 400px），并实现我正在调整原始jQuery文件。这是代码（我的一些额外的行（注释'添加！'））。

var cbpHorizontalMenu = (function () {
    var $listItems = $('#cbp-hrmenu > ul > li'),
        $menuItems = $listItems.children('a'),
        $body = $('body'),
        current = -1;

    function init() {
        $menuItems.on('click', open);
        $listItems.on('click', function (event) {
            event.stopPropagation();
        });
    }

    function open(event) {
        if (current !== -1) {
            $listItems.eq(current).removeClass('cbp-hropen');
        }
        var $item = $(event.currentTarget).parent('li'),
            idx = $item.index();
        if (current === idx) {
            $item.removeClass('cbp-hropen');
            //added!
            current = -1;
        } else {
            $item.addClass('cbp-hropen');
            current = idx;
            $body.off('click').on('click', close);
            var content2Height = jQuery(".cbp-hrsub").height() + 400;
            jQuery('#content2').height(content2Height); //added
        }
        return false;
    }

    function close(event) {
        $listItems.eq(current).removeClass('cbp-hropen');
        //added!
        current = -1;
    }
    return {
        init: init
    };
})();

它做了什么，但不是我需要的。它获得第一个 div.cbp-hrsub的高度，并将其（+ 400px）应用于div.content2。我需要的是定位当前标签（event.currentTarget的一个孩子，我想？），计算它的高度并将其应用到content2 div。

如果有帮助，这是一个简化的HTML：

<div class="content2">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="#">tab 1</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                    I am 1st tab, 100px height.
                </div>
            </div>
        </li>
        <li>
            <a href="#">tab 2</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner">
                    I am 2nd tab, 200px height.

                </div>
            </div>
        </li>
        <li>
            <a href="#" class="white06">Nigel's CV</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                    I am 3rd tab, 300px height.
                </div>
            </div>
        </li>

    </ul>
</nav>

为了澄清，我想保留原始插件，只是为了在文件末尾插入一些东西而不是我的2行。（var content2Height = jQuery（“。cbp-hrsub”）。height（）+ 400; jQuery（'＃content2'）。height（content2Height）; //已添加谢谢大家的时间。

ZEL

Answer 1

使用.parent（）定位父容器时，结果不一致。在这一行：

var $item = $(event.currentTarget).parent('li'),
        idx = $item.index();

请尝试使用.closest（）：

var $item = $(event.currentTarget).closest('li'),
        idx = $item.index();

哦，等等！我看到了这个问题：

var content2Height = jQuery(".cbp-hrsub").height() + 400;

您正在检索所有.cbp-hrsub分类元素。它会尝试返回一个高度，我不确定jQuery在查看数组时如何确定它，但我猜它只是从数组中选出第一个元素。

此时你真正需要的是这样的事情：

var content2Height = $item.first(".cbp-hrsub").height() + 400;

应该给出当前项目（上面找到）中包含的.cbp-hrsub的高度，而不是数组中第一个.cbp-hrsub的高度。

定位event.currentTarget的子项

1 个答案: