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

http://jsfiddle.net/zfQvD/16/

jQuery を使用してスタイル付きのafter矢印を追加することは可能ですか? がtext class閉じている場合、after矢印クラスtext classが表示されている場合は削除してから、矢印を追加しますか? やってみたけどダメみたい

4

1 に答える 1

3

@elclanrsのコメントによると、JSで疑似要素を追加することはできません。ただし、CSSでそれらを宣言して、親要素に特定のクラスがある場合にのみ表示されるようにしてから、次のようにこのクラスをJSで切り替えます。

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

ボックスをクリックしてこのクラスを追加するには、JSに行を追加する必要もあります。

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

こちらの例をご覧ください：http：//jsfiddle.net/zfQvD/17/

于 2012-11-14T02:45:04.090 に答える