将插入符Div添加到下拉菜单

Question

I have a problem.Which is,I cannot add a div "caret" to my drop-down menu,on menus which have childs only.There is my code

 $(document).ready(function(){ if ($('.mobile-menu li:has(sub-menu)')) { $('.mobile-menu li').parent('.ul').append('<div class=caret></div>'); } else { alert('function is not working'); } }); 

 /************************************************ Mobile-Menu Style ************************************************/ .mobile-show{ dispay:block; } .mobile-menu{ position:fixed; width:70%; height:100%; background:white; z-index:1000; } .mobile-menu.sub-menu{ position:absolute; } .mobile-menu ul{ top:10.2%; color:black; position:relative; text-align:left; font-weight:bold; } .mobile-menu li a { display: block; padding: 4% 0; border-bottom:1px solid black; } .mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu .sub-menu > li:hover > a{ background-color: #111; color: #fff; } .mobile-menu ul li ul{ height:100%; width:100%; display:none; background:#fff; border:none; position:relative; } .mobile-menu ul li:hover ul{ display:block; } /************************************************ Caret Design ************************************************/ .caret { width:100%; height:auto; position:relative; border-bottom:1px solid #000; } .caret:before { content:""; border-color: #FFF transparent transparent transparent; border-style:solid; border-width:12px; width:0; height:0; position:absolute; bottom:-24px; left:45%; z-index:1020; } .caret:after { content:""; border-color: #000 transparent transparent transparent; border-style:solid; border-width:12px; width:0; height:0; position:absolute; bottom:-25px; left:45%; } 

 <div class="mobile-menu"> <ul class="mobile-menu-ul"> <div class="caret"></div> <?php wp_nav_menu(array ( 'theme_location'=> 'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?> 

I'am pretty new to this,and especially to jQuery.This is what my menu looks like right now : http://prntscr.com/d6txgx On top of the menu is what i want to look like when there are child elements in any of the menus.At the bottom is what looks like with my code at the moment... I would appreciate any help!!THANK YOU ! :)

Answer 1

If it's right you can just target the wordpress menu class .menu-item-has-children and target all the css of .caret on that.

Then you don't need jQuery!

 /************************************************ Mobile-Menu Style ************************************************/ .mobile-show{ dispay:block; } .mobile-menu{ position:fixed; width:70%; height:100%; background:white; z-index:1000; } .mobile-menu.sub-menu{ position:absolute; } .mobile-menu ul{ top:10.2%; color:black; position:relative; text-align:left; font-weight:bold; list-style: none; padding: 0; } .mobile-menu li a { display: block; position: relative; padding: 4% 0; border-bottom:1px solid black; } .mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu .sub-menu > li:hover > a{ background-color: #111; color: #fff; } .mobile-menu ul li.menu-item-has-children ul{ height:100%; width:100%; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; background:#fff; border:none; position:relative; } .mobile-menu ul li.menu-item-has-children:hover ul{ display:block; visibility: visible; opacity: 1; } .menu-item-has-children > a{ border-bottom:1px solid #000; } .menu-item-has-children > a:before { content:""; border-color:#FFF transparent transparent transparent; border-style:solid; border-width:12px; width:0; height:0; position:absolute; bottom:-24px; left:45%; z-index:1020; } .menu-item-has-children > a:after { content:""; border-color:#000 transparent transparent transparent; border-style:solid; border-width:12px; width:0; height:0; position:absolute; bottom:-25px; left:45%; } .mobile-menu ul li.menu-item-has-children:hover a:before{ border-color: transparent transparent #FFF transparent; bottom: 0; } .mobile-menu ul li.menu-item-has-children:hover a:after{ border-color: transparent transparent #000 transparent; bottom: 0; } 

 <div class="mobile-menu"> <ul id="menu-top-menu" class="mobile-menu-ul"> <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35 dropdown"> <a title="test page" href="http://wpbasis.com/test-page/" data-dropdown="dropdown" class="dropdown-toggle" aria-haspopup="true">test page <span class="caret"></span></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"> <a title="Checkout" href="http://wpbasis.com/checkout/">Checkout</a> </li> <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"> <a title="Cart" href="http://wpbasis.com/cart/">Cart</a> </li> </ul> </li> </ul> </div>