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

Question

我有一个问题。那就是，我不能在我的下拉菜单中添加一个 div“插入符号”，在只有子菜单的菜单上。这是我的代码

$(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' 
                                                )); ?>

我对此很陌生，尤其是 jQuery。这就是我的菜单现在的样子:http://prntscr.com/d6txgx当任何菜单中有子元素时，菜单顶部是我想要的样子。底部是我的代码目前的样子...... 如果有任何帮助，我将不胜感激!谢谢! :)

Answer 1

如果它是正确的，你可以只定位 wordpress 菜单类 .menu-item-has-children 并定位 .caret 的所有 css。

那你就不需要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>