Second Office-ui-fabric-js ContextualMenu not working

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/201391

  •  12-12-2020
  •  | 
  •  

Pergunta

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

My 2 contextual menu buttons, one workinh, one not. 

<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>
Foi útil?

Solução

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]);
    }
Licenciado em: CC-BY-SA com atribuição
Não afiliado a sharepoint.stackexchange
scroll top