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');
}

事情是我需要用background-image或img-scr来做，因为我需要一个箭头。在那个jsfiddle，他们正在放置一个＆＃34; +＆＃34;用＆＃34;内容＆＃34;。但我是一个新手，我不知道该怎么做。任何帮助将不胜感激。

Answer 1

您可以修改: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

Answer 2

试试这个 -

    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 3

remove space between .has-submenu.nav-open 

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

Answer 4

好的，我还是要发布这个，因为我真的不明白为什么所有给定的解决方案都是如此令人难以置信和不必要的复杂。就像我说的那样，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);
}

打开和关闭菜单图标

4 个答案: