追加キャレット本部がドロップダウンするメニュー

Question

を私はproblem.Whichが持っている、私はチャイルズonly.Thereを持っているメニューに、私のドロップダウンメニューにdivの「キャレット」を追加することはできませんすることは私のコードである

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

/************************************************ 
 
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', 
 
\t \t \t 'container' => '', 
 
\t \t \t 'items_wrap' => '%3$s' 
 
               )); ?>

これまで、特にjQuery.Thisにかなり新しい

I'amは私のメニューは今のように見えるものです：メニューの上にhttp://prntscr.com/d6txgxは、私が子要素があるときに見えるようにしたいものですメニューのいずれか。下は、現時点で私のコードのように見えるものです... 何か助けていただければ幸いです！ありがとうございます！ :)

Answer 1

それが正しい場合は、WordPressメニュークラス.menu-item-has-childrenをターゲットにして、そのすべてのCSSを.caretに設定できます。

次に、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>