打开并关闭菜单中的图标

Question

所以在这里我找到了一个真正有用的fiddle：

我没有像上述另一个子菜单的子菜单，但我管理的结构。我的问题是图标。当子菜单它关闭，我希望有一个箭头指向下方，

.iconOpen{ 
background-image: url('arrow_accordion_open.png') !important; 
width: 11px; 
height: 13px; 
background-position: center right; 
background-repeat: no-repeat; 
} 

和它打开时，我希望有一个箭头朝上。

.iconClose{ 
width: 11px; 
height: 13px; 
background-position: center right; 
background-repeat: no-repeat; 
background-image: url('arrow_accordion_close.png'); 
} 

事情是我需要做的背景图像或img-scr，因为我需要一定的箭头。在那个jsfiddle里，他们把“+”和“content”放在一起。但我是一个新手，我不知道该怎么做。任何帮助，将不胜感激。

Answer 1

试试这个 -

a:after { 
     content: "" !important; 
     background-repeat: no-repeat; 
     background-image: url('arrow_accordion_close.png'); 
     width: 10px; 
     height: 10px; 
     display: inline-block; 
     margin-left: 10px; 
    } 

Answer 2

remove space between .has-submenu.nav-open 

.has-submenu.nav-open > a:after { 
    content:' - '; 
} 

Answer 3

好吧，我还是要张贴这一点，因为我真的不明白为什么所有的给出的解决方案是如此令人难以置信的和不必要的复杂。就像我说的那样，CSS已经在那里了。您只需更换内容并删除.has-submenu和.nav-open之间的空格，因为这些类位于相同的元素上。

.has-submenu > a:after { 
    content:url(arrow_accordion_open.png); 
} 
.has-submenu.nav-open > a:after { 
    content:url(arrow_accordion_close.png); 
} 

Answer 4

而不是增加了两个新的类，你可以只修改:after国家也这样做你想让他们什么。

我添加了你的CSS，有几个修正和一些新的属性，并让它按你的意愿工作。由于我没有图像，它使用颜色备份来显示发生了什么，但是删除了颜色值，并使用这个位置可以访问图像。

此答案也适用于子菜单中的子菜单，并且不仅影响*别。

$('.has-submenu > a').on('click', function (e) { 
 
    e.preventDefault(); 
 
    
 
    // slide up currently open except if click is nested within an already open menu 
 
    if ($(this).closest('.nav-open').length === 0) 
 
    { 
 
     $('.nav > .nav-open').removeClass('nav-open').find('> ul > li').slideUp(); 
 
    } 
 
    
 
    // give the <li> the "nav-open" class, then slide the <li> grandchildren 
 
    $(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle(); 
 
});

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
a { 
 
    display:block; 
 
    background:#aaa; 
 
    border:1px solid #ccc; 
 
    padding:5px; 
 
    color:#fff; 
 
} 
 
li li { 
 
    display:none; 
 
} 
 
.has-submenu > a:after { 
 
    content:''; 
 
    background: url(arrow_accordion_open.png) red; 
 
    display: inline-block; 
 
    width: 11px; 
 
    height: 13px; 
 
    background-position: center right; 
 
    background-repeat: no-repeat; 
 
    margin-left: 5px; 
 
} 
 
.has-submenu.nav-open > a:after { 
 
    content:''; 
 
    background: url('arrow_accordion_close.png') blue; 
 
} 
 
li li a { 
 
    padding-left:40px; 
 
    background:#888; 
 
} 
 
li li li a { 
 
    padding-left:80px; 
 
    background:#333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="nav level-1"> 
 
    <li><a href="#">Link</a></li> 
 
    <li class="has-submenu"><a href="#">Link</a> 
 
     <ul class="level-2"> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="has-submenu"><a href="#">Link</a> 
 
     <ul class="level-2"> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li class="has-submenu"><a href="#">Link</a> 
 
       <ul class="level-3"> 
 
        <li><a href="#">Link</a></li> 
 
        <li><a href="#">Link</a></li> 
 
        <li><a href="#">Link</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li class="has-submenu"><a href="#">Link</a> 
 
     <ul class="level-2"> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>

• JSFiddle Link