定位event.currentTarget的子级

Question

我找到了一个简单的选项卡jQuery插件，需要为我的项目进行一些调整。 有问题的选项卡-位置完全正确-已从流程中删除，因此不会影响包装div的高度，因此不会显示其背后的背景。 我试图强制包装div的高度（包含背景图像）以匹配所选标签的高度（对于导航和标题，为+ 400px），并且要实现这一目标，我正在对原始jQuery文件进行调整。 这是代码（带有我的几行额外代码（注释为“ add！”））。

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>

为了澄清起见，我想保持原始插件不变，只是在文件末尾插入一些内容而不是我的两行内容。 （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的高度。