最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery addClass afterBefore - Stack Overflow

programmeradmin2浏览0评论
<div id="box"></div>
<div class="text"></div>?



$(document).ready(function () { 
$('#box').click(function () {
      $('.text').slideToggle('slow');
  });


});


#box{
height:40px;
width:100px;
background:red;
}

#box:hover{background:blue;}

#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}


#box:hover:after{

border-top-color: blue;
}

.text{

display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}

/

Is that possible to use jQuery to add the styled after arrow? when text class is closed, remove after arrow class if text class is shown, then add the arrow? I tried, but seems doesn't work

<div id="box"></div>
<div class="text"></div>?



$(document).ready(function () { 
$('#box').click(function () {
      $('.text').slideToggle('slow');
  });


});


#box{
height:40px;
width:100px;
background:red;
}

#box:hover{background:blue;}

#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}


#box:hover:after{

border-top-color: blue;
}

.text{

display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}

http://jsfiddle/zfQvD/16/

Is that possible to use jQuery to add the styled after arrow? when text class is closed, remove after arrow class if text class is shown, then add the arrow? I tried, but seems doesn't work

Share Improve this question edited Nov 14, 2012 at 2:33 SomeKittens 39.5k19 gold badges117 silver badges145 bronze badges asked Nov 14, 2012 at 2:22 oloolo 5,27115 gold badges60 silver badges96 bronze badges 4
  • Can you reword what you are trying to acplish? A little lost by your wording – AJak Commented Nov 14, 2012 at 2:26
  • 1 You can't style pseudo elements in JavaScript because they don't actually exist in the DOM. Use a regular tag instead.. – elclanrs Commented Nov 14, 2012 at 2:29
  • just add the styled arrow when /expand/, remove arrow when not /expand/ – olo Commented Nov 14, 2012 at 2:29
  • possible duplicate of Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) – Blazemonger Commented Feb 3, 2014 at 20:08
Add a ment  | 

1 Answer 1

Reset to default 5

As per @elclanrs ment, you can't add pseudo elements with JS. What you can do, however, is declare them in your CSS to be only shown when a parent element has a specific class, and then toggle this class with JS, like this:

#box.expanded:after {
 content:'';
 height: 10px;
 position: absolute;
 width: 0;
 margin-top:40px;
 margin-left:40px;
 border: 10px solid transparent;
 border-top-color: red;
}

You also have to add a line to your JS for this class to be added upon clicking the box:

$('#box').click(function () {
  $(this).toggleClass('expanded');
  $('.text').slideToggle('slow');
});

See the example here: http://jsfiddle/zfQvD/17/

发布评论

评论列表(0)

  1. 暂无评论