Question

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

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

我的代码的一部分：

<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兼容

枢轴图标不可单击

3 个答案: