Second Office-ui-fabric-js ContextualMenu not working
-
12-12-2020 - |
Вопрос
I am trying to use two or more Office-ui-fabric-js Contextual Menus on a SharePoint page, but having problem when introducing the second menu. The first one behaves as it should, expanding a menu on click, but all other menus do not. I am literally copy+pasting the same html and cannot figure out why the first menu works while the others just fail to expand. Do I need to adapt the script to make this work?
Below is a screenshot of the test buttons and the html, plus a link to what I'm referring to. Any clue as to why I'm having problems with this is much appreciated. Apologies if some of the css classes look weird below.
https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/ContextualMenu.md
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 4</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server" />
<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>
<link href="https://static2.sharepointonline.com/files/fabric/office-ui- fabric-core/5.0.1/css/fabric.min.css" rel="stylesheet" />
<link href="https://static2.sharepointonline.com/files/fabric/office-ui- fabric-js/1.2.0/css/fabric.components.min.css" rel="stylesheet" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui- fabric-js/1.2.0/js/fabric.min.js"></script>
</head>
<body>
<ul>
<li class="ms-ListItem">
<div class="ms-ContextualMenu-basic">
<button class="ms-Button
ms-Button--primary
"><span class="ms-Button-label">Button 1 that works</span></button>
<ul class="ms-ContextualMenu is-hidden ">
<li class="ms-ContextualMenu-item ms-ContextualMenu-item--hasMenu">
<a class="ms-ContextualMenu-link " tabindex="1">XXX</a>
<i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
</i></li>
<li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
<a class="ms-ContextualMenu-link " tabindex="1">YYY</a>
<i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
</i></li>
<li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
<a class="ms-ContextualMenu-link " tabindex="1">ZZZ</a>
<i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
</i></li>
</ul>
</div>
</li>
<li class="ms-ListItem">
<div class="ms-ContextualMenu-basic">
<button class="ms-Button
ms-Button--primary
"><span class="ms-Button-label">Button 2 that does not work</span> </button>
<ul class="ms-ContextualMenu is-hidden ">
<li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
<a class="ms-ContextualMenu-link " tabindex="1">XXX</a>
<i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
</i></li>
<li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
<a class="ms-ContextualMenu-link " tabindex="1">YYY</a>
<i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
</i></li>
<li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
<a class="ms-ContextualMenu-link " tabindex="1">ZZZ</a>
<i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
</i></li>
</ul>
</div>
</li>
</ul>
<script type="text/javascript">
var ButtonElement = document.querySelector(".ms-ContextualMenu-basic .ms-Button");
var ContextualMenuElement = document.querySelector(".ms-ContextualMenu- basic .ms-ContextualMenu");
var contextualMenu = new fabric['ContextualMenu'](ContextualMenuElement, ButtonElement);
</script>
</body>
</html>
Решение
You are using document.querySelector
, it will always chose your first. You could either specify them with a unique identifier or use querySelectorAll
var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenu-basic .ms-ContextualMenu");
var ButtonElements = document.querySelectorAll(".ms-ContextualMenu-basic .ms-Button");
for (var i = 0; i < ButtonElements.length; i++) {
new fabric['ContextualMenu'](ContextualMenuElements[i], ButtonElements[i]);
}