动态定位Nubbin失败的情况

时间:2019-03-20 04:51:33

标签: javascript jquery css

JavaScript

    $(document).on("mouseover", ".link-item .testDetail", function () {
        let lstPosClass = ["position-nubbin-20", "position-nubbin-40", "position-nubbin-60", "position-nubbin-80"];
        let objElm = $(this).siblings(".slds-popover");
        objElm.css("left", "");
        let lstHtmlCoordinates = objElm.closest("html")[0].getBoundingClientRect();
        let lstElmCoordinates = objElm.get(0).getBoundingClientRect();
        let intleftDiff = lstHtmlCoordinates.width - lstElmCoordinates.left - lstElmCoordinates.width;
        if (Math.sign(intleftDiff) === -1) {
            objElm.css("left", intleftDiff);
            let leftVal = Math.abs(intleftDiff) + 35;
            objElm.attr("data-nubbin-left", leftVal + "px");
            let percent = Math.abs((leftVal / lstElmCoordinates.width) * 100);
            let strNubbinClass = '';
            if (percent > 20 && percent <= 40) {
                strNubbinClass = "position-nubbin-20";
            } else if (percent > 40 && percent <= 60) {
                strNubbinClass = "position-nubbin-40";
            } else if (percent > 60 && percent <= 80) {
                strNubbinClass = "position-nubbin-60";
            } else {
                strNubbinClass = "position-nubbin-80";
            }
            lstPosClass.forEach(function (objClassName) {
                if (objElm.hasClass(objClassName)) {
                    objElm.removeClass(objClassName);
                }
            });
            objElm.addClass(strNubbinClass);
        };
    });

CSS

    .test-page .link-item .slds-popover.position-nubbin-20:before, .slds-popover.position-nubbin-20:after {
        left: 20%;
    }

    .test-page .link-item .slds-popover.position-nubbin-40:before, .slds-popover.position-nubbin-40:after {
        left: 40%;
    }

    .test-page .link-item .slds-popover.position-nubbin-60:before, .slds-popover.position-nubbin-60:after {
        left: 60%;
    }

    .test-page .link-item .slds-popover.position-nubbin-80:before, .slds-popover.position-nubbin-80:after {
        left: 80%;
    }

上面的代码可以正常使用2到3个弹出窗口,但是当有多个弹出窗口时失败。如何动态设置小结enter image description here

的位置

该如何解决?任何想法?很抱歉,无法从弹出窗口中隐藏文本。

想法:

我认为,如果我可以掌握文本元素的边界,可以将小核放在它们之间,但是我不确定如何获取弹出窗口所在的文本元素的边界。

0 个答案:

没有答案
相关问题