打开和关闭的菜单图标答案

【问题标题】：Open and closed menus icons打开和关闭的菜单图标
【发布时间】：2017-02-11 02:31:53
【问题描述】：

所以在这里我发现了一个非常有用的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中，他们将“+”与“内容”放在一起。但我是新手，我不知道该怎么做。任何帮助将不胜感激。

【问题讨论】：

Fiddle 中的 CSS 已经存在。 .has-submenu > a:after { content:' + '; } .has-submenu.nav-open > a:after { content:' - '; }

标签： javascript jquery html css

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

remove space between .has-submenu.nav-open 

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

【讨论】：

【解决方案4】：

试试这个 -

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

【讨论】：