function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
REVNAREVNA 

CSS HTML HOVER on MOBILE

 
<ul class="navAU" >
        <aura:iteration items="{!v.menuItemsLevel1}" var="menu1">
            <li  class="li-padding" >
                <a onclick="{!c.openMenuLevel1}" style="font-family:'AeroportMedium';font-weight:400;"  class="dropdown-au anchor menu-level1 a-no-decor"> 
                    {!menu1.menuItemForNav.Menu_Name__c}
                    &nbsp;
                    <span class="caret"></span>
                </a>
                <aura:if isTrue="{!menu1.hasChildren}">
                    <ul class="{!(v.isShowMenu == 'hide'?'dropdown-content-hide':'dropdown-content dropdown-content-show')}">
                        <aura:iteration items="{!v.menuItemsLevel2}" var="menu2">
                            <aura:if isTrue="{!menu2.menuItemForNav.Parent_Menu__c == menu1.menuItemForNav.Id}">
                                <li class="li-padding">
                                    <a  style="font-family:'AeroportMedium';" href="/B2BAUSECOMMERCE/ccrz__ProductList" class="dropdown-au a-no-decor menu-level2">
                                        {!menu2.menuItemForNav.Menu_Name__c}
                                    </a>
                                </li>
                            </aura:if>
                        </aura:iteration>
                    </ul>
                </aura:if>
            </li>
        </aura:iteration>
        <li class="">
            <a href="" class="menu-level1 dropdown a-no-decor"  data-menuid="10B2BAUSECOMMERCEORDER" role="button" aria-haspopup="true" aria-expanded="false">
                {!v.AU_MOBILE_MENU[0]}	&nbsp;
                <span class="caret"></span>
            </a> 
            <ul class="dropdown-content">
                <li style="color:black" class="">
                    <aura:iteration items="{!v.AU_MOBILE_MENU}" var="menu2">
                        <a href=""  data-toggle="dropdown" data-menuid="10B2BAUSECOMMERCEORDER" role="button" aria-haspopup="true" aria-expanded="false">
                            {!menu2}
                        </a> 
                        
                    </aura:iteration>
                </li>
            </ul>
        </li>
    </ul>
.THIS .dropdown-au:hover+.dropdown-content {
		display: block;
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		overflow: hidden;
	}

Current
I am using HOVER to open the dropdown on click. But on click on the same menu header it does not collapse. I am unable to inject styles using salesforce lightning addclass & removeclass ; this lies within Aura if.

Please let me know a way to hide the menu on click of the "SAMPLE" again