如何在jQuery手风琴菜单的右侧添加箭头

Question

标题有点令人困惑，因为手风琴菜单已经有一个箭头可以切换选择/取消选择，但我的意思是这个 - 现在当我选择菜单时它看起来像这样：

我想让它看起来像这样：

所以它不是右侧的箭头，而是在菜单内部，它是右边界后面的箭头。

我正在使用标准的jQuery手风琴，菜单是这样创建的：

@foreach (...)
{ 
  <h3>@item.Name</h3>
    <div>
      <ul>
        @foreach (...)
       </ul>
    </div>
}

所以基本上我正在使用手风琴菜单的标准结构，只是菜单是动态创建的。选择某个菜单时使背景为蓝色的自定义样式如下所示：

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border-bottom: 1px solid #363636;
background: #ffffff url(../Content/images/..) 50% 50% repeat-x;
font-weight: normal;
color: #ffffff;
    text-shadow: 1px 1px #000000;
}

我不确定，但我认为这是添加样式以显示此附加箭头的合适位置，我只是不知道该怎么做。此外，即使风格稍微定制，它仍然是原始的jquery.ui.smoothness.css所以我愿意接受如何显示此箭头的建议。最简单的解决方案似乎改变了background，但我宁愿不接触，因为它不是我的代码，只是找到一种方法来添加独立于background样式的箭头。

Answer 1

您可以使用伪元素。

使用伪元素（也称为:before和:before），您可以创建额外的内容，而无需添加额外的HTML代码。

<强> HTML

<div><span class="arrow"></span></div>

<强> CSS

div {
    width: 120px;
    height: 60px;
    position: relative;
    background: -webkit-linear-gradient(top, #09438d, #0258a8);
}

div:before { /* The blue arrow at the right of the menu */
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    margin: auto 0;
    border: 10px solid;
    border-color: transparent transparent transparent #064d9a;
}

.arrow { /* The circle inside the menu */
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.5);
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto 0;
}

.arrow:before { /* The white arrow inside the circle */
    content: '';
    display: block;
    width: 0;
    height: 0;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    border: 5px solid;
    border-color: #FFF transparent transparent transparent;
}

说明：

蓝箭：

这里我们用:before创建一个新元素。我们将position设置为absolute，以便我们的箭头可以放置在我们想要的位置。

要创建箭头，我们正在使用边框。这样我们就不必使用图像了。

要执行箭头效果，我们会在:before - 元素上添加边框。现在我们只需给我们的箭头上色。

只需在边框的一侧添加颜色，向其他边添加transparent即可。 （见下图：）

要将箭头置于中间垂直方向，我们将top和bottom设置为0，然后将margin设置为auto。现在我们可以按照与block元素对齐的方式对齐箭头。要将其移出菜单框，我们只需将right设置为-20px （箭头的双倍宽度）。

白箭：

这与“蓝箭”的方式非常相似。 在这里，我们首先创建一个圆圈，然后添加或箭头，而不是菜单框。

Here's a Fiddle

Answer 2

首先将position: relative添加到.ui-widget-header类。

为.ui-widget-header添加一个新的伪选择器：

ui-accordion .ui-accordion-header:after {
    content: "";
    width: 0;
    height: 0;
    //Trick here - drawing a triangle with border
    border: 10px solid transparent;
    border-left-color: red;
    //Next positioning it correctly
    position: absolute;
    right: -20px; 
    top: 50%; //Center it in the middle
    margin-top: -10px; //And pull it back 10px (Half of the triangles height)
}