1

I'm using Shopify Polaris CSS framework but I do not use React, I want to use jQuery.

I have this html:

<div class="Polaris-ActionMenu">
               <div>
                  <div class="Polaris-ActionMenu-RollupActions__RollupActivator">
                     <button class="Polaris-Button Polaris-Button-sel" type="button" tabindex="0" aria-controls="Polarispopover1" aria-owns="Polarispopover1" aria-expanded="false">
                        <span class="Polaris-Button__Content">
                           <span class="Polaris-Button__Text">More actions</span>
                           <span class="Polaris-Button__Icon">
                              <div class="">
                                 <span class="Polaris-Icon">
                                    <span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--regular Polaris-Text--visuallyHidden">
                                    </span>
                                    <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                       <path d="M13.098 8h-6.196c-.751 0-1.172.754-.708 1.268l3.098 3.432c.36.399 1.055.399 1.416 0l3.098-3.433c.464-.513.043-1.267-.708-1.267Z">
                                       </path>
                                    </svg>
                                 </span>
                              </div>
                           </span>
                        </span>
                     </button>
                  </div> 
                  <div>
                     <div data-portal-id="popover-Polarisportal1">
                        <div class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open">
                           <div class="Polaris-Popover" data-polaris-overlay="true">
                              <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
                              <div class="Polaris-Popover__Wrapper">
                                 <div tabindex="-1" class="Polaris-Popover__Content" style="display: none;">
                                    <div class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--horizontal" data-polaris-scrollable="true">
                                       <div class="Polaris-ActionList">
                                          <div class="Polaris-ActionList__Section--withoutTitle">
                                             <ul class="Polaris-ActionList__Actions" role="menu" tabindex="-1">
                                                <li role="presentation"><a href="#" type="button" class="Polaris-ActionList__Item" role="menuitem"><span class="Polaris-ActionList__Content"><span class="Polaris-ActionList__Text">Duplicate</span></span></a></li>
                                               


                                             </ul>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

to open the Popover I write this jQuery code:

$('.Polaris-Button-sel').click(function() {
  $(this).closest('.Polaris-Popover__Content').toggle();
});

and

$('.Polaris-Button-sel').click(function() {
  $(this).next('.Polaris-Popover__Content').toggle();
});

but both don't work. How can I open Popover using jQuery code?

halfer
  • 19,824
  • 17
  • 99
  • 186
Aleks Per
  • 1,549
  • 7
  • 33
  • 68

0 Answers0