event.currentTarget的靶向子

Question

我找到了一个简单的选项卡菜单jQuery插件，需要对我的一个项目进行一些调整。问题中的标签--绝对定位--是从流中取出的，因此对包装div的高度没有贡献，所以后面的背景没有显示出来。我试图强制包装div的高度(包含背景图像)匹配所选选项卡的高度( nav和header为+400 on )，并在动态中实现这一点，我正在调整原始的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的高度，并将其(+400 to )应用于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(“.content2Height”).height()+.height//增加了，谢谢大家抽出时间。

泽尔

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;

您正在检索这里的所有. classed类元素。它将试图返回一个高度，我不太确定jQuery在查看数组时是如何确定的，但我猜它只是从数组中选择了第一个元素。

那么，现在你真正需要的是这样的东西：

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

这应该会给出当前项中包含的..cbp hrsub的高度(见上文)，而不是数组中第一个..cbp hrsub的高度。