toggleSubMenusOn showcase

by Banandrew

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/components/transition.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/components/transition.min.js"></script>
<div class="ui segment">
  <h4 class="ui header">.ui.dropdown</h4>
  <div class="ui dropdown button">
    <span class="text">Choose Category</span>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">
        <span class="text">Category 1</span>
      </div>
      <div class="item">
        <i class="dropdown icon"></i>
        <span class="text">Category 2</span>
        <div class="menu">
          <div class="item">Item 2A</div>
          <div class="item">Item 2B</div>
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">Category 6</span>
            <div class="menu">
              <div class="item">Item 6A</div>
              <div class="item">Item 6B</div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <span class="text">Category 3</span>
      </div>
      <div class="item">
        <i class="dropdown icon"></i>
        <span class="text">Category 4</span>
        <div class="menu">
          <div class="item">Item 4A</div>
          <div class="item">Item 4B</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui segment">
  <h4 class="ui header">.selection</h4>
  <div class="ui selection dropdown">
    <input type="hidden" name="gender">
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu">
      <div class="item" data-value="male">Male</div>
      <div class="item" data-value="female">Female</div>
    </div>
  </div>
</div>
<div class="ui segment">
  <h4 class="ui header">.multiple</h4>
  <select name="skills" multiple="" class="ui dropdown">
    <option...

CSS

body {
    padding: 1em;
}

JavaScript

!function(e,t,n,i){"use strict";t=void 0!==t&&t.Math==Math?t:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),e.fn.dropdown=function(i){var o,a=e(this),s=e(n),r=a.selector||"",l="ontouchstart"in n.documentElement,c=!1,u=(new Date).getTime(),d=[],v=arguments[0],m="string"==typeof v,f=[].slice.call(arguments,1);return a.each(function(h){var g,b,p,w,x,S,C,y,A=e.isPlainObject(i)?e.extend(!0,{},e.fn.dropdown.settings,i):e.extend({},e.fn.dropdown.settings),T=A.className,k=A.message,L=A.fields,I=A.keys,D=A.metadata,q=A.namespace,R=A.regExp,O=A.selector,V=A.error,E=A.templates,M="."+q,F="module-"+q,z=e(this),P=e(A.context),H=z.find(O.text),j=z.find(O.search),N=z.find(O.sizer),U=z.find(O.input),K=z.find(O.icon),W=z.prev().find(O.text).length>0?z.prev().find(O.text):z.prev(),B=z.children(O.menu),$=B.find(O.item),Q=!1,X=!1,Y=!1,G=this,J=z.data(F);y={initialize:function(){y.debug("Initializing dropdown",A),y.is.alreadySetup()?y.setup.reference():(y.setup.layout(),y.refreshData(),y.save.defaults(),y.restore.selected(),y.create.id(),y.bind.events(),y.observeChanges(),y.instantiate())},instantiate:function(){y.verbose("Storing instance of dropdown",y),J=y,z.data(F,y)},destroy:function(){y.verbose("Destroying previous dropdown",z),y.remove.tabbable(),z.off(M).removeData(F),B.off(M),s.off(w),y.disconnect.menuObserver(),y.disconnect.selectObserver()},observeChanges:function(){"MutationObserver"in t&&(S=new MutationObserver(y.event.select.mutation),C=new MutationObserver(y.event.menu.mutation),y.debug("Setting up mutation observer",S,C),y.observe.select(),y.observe.menu())},disconnect:{menuObserver:function(){C&&C.disconnect()},selectObserver:function(){S&&S.disconnect()}},observe:{select:function(){y.has.input()&&S.observe(U[0],{childList:!0,subtree:!0})},menu:function(){y.has.menu()&&C.observe(B[0],{childList:!0,subtree:!0})}},create:{id:function(){x=(Math.random().toString(16)+"000000000").substr(2,8),w="."+x,y.verbose("Creating unique id for...