Question

我正在制作一个菜单，因为菜单是一个边缘发光的曲线形状，我需要在顶部放一个空白块以隐藏重叠上不需要的光晕。我正在使用菜单的li标签上的：after选择器创建它，并且这样做的代码工作正常。

我的问题是，我只能通过切换display属性来一次应用于所有菜单项，但我想要的是：after选择器只应用于当前列表项。

每个列表项都有唯一的ID，但我似乎无法解决如何在jquery中的特定列表项上使用：after选择器。

提前感谢您的帮助。对不起，如果不清楚的话。

HTML代码

<ul id="menu">
    <li id="0">link 1</li>
<li id="1">link 2</li>
<li id="2">link 3</li>
</ul>

列表项的CSS

#menu li{
float:left;
margin:0 20px 0 0;
height:87px;
z-index:1;
position:relative;
background: #f8f8f8;
cursor:pointer;
border:1px solid #CCC;
border-bottom:none;
}

#menu li:after{
display:none;
content: '';
position: absolute;
top: 0;
bottom: -5px;
left: 0;
width: 291px;
height:10px;
margin-top:109px;
background: #f8f8f8;
}

我认为这就像放

之类的东西一样简单

$$('li[id="0"]:after').show();

或者

$$('li[id="1"]:after').css("display" : "block");

但这些不起作用。

Answer 1

当您处理:after和:before时，通常只能通过重复data-content属性来更改内容值（例如参见此thread）！但是，您可以做更多事情，例如您可以使用脏技术替换与:after和:before相关的CSS代码的方式。

我要做的是删除与我需要更改的:after或:before相关联的类，然后在文档中创建一个新类并将其应用于目标元件（一个或多个）。

我将使用如此漂亮的CSS3三角形做一个简短的例子。假设您有一个类arrow-up并且使用:after在div上打印带有css的三角形。以下是CSS。

.div{position:relative;display:block; width:100px; height:50px; border:1px solid black} .arrow-up:after { content:""; position:absolute; top:-10px; left:50%; margin-left:-5px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #333; }

下面是一段相关的HTML

<div>My div with centered triangle on top</div> <div id="toBeMoved" class="arrow-up">My div with centered triangle moved a lot with JQuery</div>

目的是将第二个div的三角形从左上角放置10％而不是默认值（在中心）。因此，我们可以使用JQuery删除旧类，在头部附加一个新的自定义类，并将新的:after css代码应用于div。

var counter = 0; $.fn.moveTheArrow = function() { $(this).removeClass('arrow-up'); var modclass = 'arrow-up' + (counter++); $("<style type='text/css'> ." + modclass + ":after{left:10%;content:'';position:absolute;top:-10px;margin-left:-5px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #333}</style>").appendTo("head"); $(this).addClass(modclass); });

请注意，我为唯一ID生成器定义了一个全局计数器地址（当然，您也可以按照其他方式）。

最后，使用JQuery调用目标div上的函数，例如

$(function(){ $('#toBeMoved').moveTheArrow(); });

以下是工作JSFiddle

Answer 2

确保您的ids是唯一的。

您只需要一个$，请尝试

$('#myID').nextAll('li').show();

jsFiddle

Jquery使用：选择后

2 个答案: