jQuery使用:after选择器 [英] Jquery using :after selector

问题描述

我当前正在制作一个菜单，由于菜单是一个奇怪的形状，边缘周围有发光效果，因此我需要在顶部放置一个空白块，以隐藏重叠部分上不需要的发光效果.我正在菜单的li标记上使用:after选择器来创建此代码，并且这样做的代码工作正常.

I am currently making a menu and because the menu is an oddshape with a glow around the edge I need to put a blank block over the top to hide the unwanted glow on the overlap. I am creating this using the :after selector on the li tags for the menu and the code to do so works fine.

但是，我的问题是，只能通过切换display属性使它一次仅应用于一个或所有菜单项，但是我想要的是:after选择器仅应用于当前列表项.

My problem however is that I can only make it apply to none or all of the menu items at once by toggling the display attribute, what I want however is for the :after selector to only be applied to the current list item.

每个列表项都有一个唯一的ID，但我似乎无法弄清楚如何在jquery中的特定列表项上使用:after选择器.

Each list item has a unique id but I can't seem to work out how to use the :after selector on a specific list item within jquery.

在此先感谢您的帮助.很抱歉，如果不清楚.

Thanks in advance for any help. Sorry if this is unclear.

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");

但是这些不起作用.

推荐答案

在处理:after和:before时，通常只能通过重复使用data-content属性来更改内容值(例如，请参见this 线程)！ 但是，您可以做更多的事情，例如您可以使用肮脏的技巧来替换与:after和:before相关的CSS代码的呈现方式.

When you handle with :after and :before, you can normally only change the content value by recurring to the data-content property (see for instance this thread)! However, you can do something more, e.g. you can replace the way the CSS code related to :after and :before is rendered by using a dirty trick.

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

What I do is to remove the class associated with the :after or :before that I need to change, then I create a new class in the document and I apply it to the target element(s).

我将使用非常漂亮的CSS3三角形作为一个简短示例. 假设您有一个类arrow-up，并且使用:after在div上打印一个带css的三角形.下面是CSS.

I will make an brief example using the so nice CSS3 triangles. Suppose you have a class arrow-up and that you use :after to print a triangle with css on top of a div. Here follows a 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

Here follows a related piece of 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的三角形放在左上角的1​​0％处，而不是默认值(在中心).因此，我们可以使用JQuery删除旧的类，将新的自定义类添加到头部，然后将具有新的:after css代码的新类应用于div.

The intent is to put the triangle of the second div at 10% from the top-left corner instead of the default value (at center). Hence, we can use JQuery to remove the old class, append a new customized class to the head and apply the new class with the new :after css code to the 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生成器的问题(当然，您也可以采用其他方法).

Notice that I defined a global counter to address for unique id generator (of course you can follow other ways as well).

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

Finally, use JQuery to call the function on the target div, e.g.

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

此处遵循有效的 JSFiddle

这篇关于jQuery使用:after选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！