javascript - 定位 event.currentTarget 的 child

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
    };
})();

它做了一些事情，但不是我需要的。它获取 first div.cbp-hrsub 的高度并将其 ​​(+400px) 应用于 div.content2。我需要的是定位 current 选项卡(我认为是 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);//添加 感谢大家的宝贵时间。

泽尔

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 的高度。