枢轴图标不可点击

Question

我的页面中有一个 pivot 元素，它可以工作，但是当我想通过图标更改文本时，它们变得不可点击，我们必须点击灰色部分。你知道如何让它们可以点击吗？

绿色为可点击部分，红色为不可点击部分。

我的部分代码：

<li id="listPivotAccount" class="ms-Pivot-link is-selected " data-content="account" title="Mon compte" tabindex="1">
   <i style="" class=" ms-Icon ms-Icon--Accounts" aria-hidden="true"></i>
</li>

You can check the code here

Answer 1

var Dropdown = new Class({
    initialize: function() {
        var e = this;
        document.addEvents({
            "click:relay(.windowLabel, .dropdown a.dropdownTrigger)": function(t, n) {
                t && (t.preventDefault(),
                t.stopPropagation()), // issue is here
                e.showPopover.call(e, n)
            }
        }),
        document.body.addEventListener("click", function(t) {
            e.hideOutside.call(e, t)
        })
    },
    // ...
})

问题出在阻止事件传播，因此所有嵌套元素不应发出您需要的内容。

解决方法是什么？
您可以尝试以不同的方式添加图标（例如使用 :before、:after）

Answer 2

郑重声明，我从未使用过 SharePoint，因此可能有更优雅的解决方案。

您可以通过在当前 JavaScript:

之后添加此原版 JavaScript 来解决此问题

    // select all icons
    var msIcons = document.querySelectorAll(".ms-Icon");

    // loop all icons
    for (var i = 0; i < msIcons.length; i++) {

        // add a click event to the nearest element with class "ms-Pivot-link"
        msIcons[i].closest(".ms-Pivot-link").addEventListener("click", function() {
            this.click();
        });
    }

jQuery以上代码示例：

    $(".ms-Icon").on("click", function() {
        $(this).closest(".ms-Pivot-link").click();
    });

Answer 3

修复它的简单方法是通过单击触发枢轴。所以如果你使用 JQuery :

$('.ms-Icon').click(function () {
            var pivot = $(this).closest(".ms-Pivot-link");
            pivot.click();
        });

简短且兼容 IE > 9

枢轴图标不可点击

Pivot icons are not clickable

html

css

ms-office