CSSで要素を変更する

Question

私はこの2つの要素p.rdmoreとul.post-ul-moreを持っていて、属性はdisplay = noneです。

ただし、特定のページでは、これらのオプションを削除したいと考えています。私はいくつかの研究を行い、このコードを考え出した。

<script type='text/javascript'> 
$('p.rdmore').removeClass('none').addClass('inherit'); 
$('ul.post-ul-more').removeClass('none').addClass('inherit'); 
</script> 

私はjavascriptのif文も試したが、うまくいかなかった。ここに何もないのですか？

Answer 1

ディスプレイなどのCSSプロパティを変更するには、css()メソッドを使用する必要があります。以下を試してください：

$('p.rdmore').css("display", "inherit"); 
$('ul.post-ul-more').css("display", "inherit"); 

.css()要素のCSSをjQueryで変更します。詳しくはhereをご覧ください。私は背景を変更したい場合は

、私はこれを行うだろう：

$("element-right-here").css("background-color", "yellow"); 

パラメータは.css(propertyName, propertyValue)または.css(propertyName)です。後者は、呼び出された時点で実際の値を返します。

Answer 2

要素を表示したい場合は、jQueryのメソッドを使用できます。

$('p.rdmore').show() 

そして、あなたはそれを非表示にする場合：

$('p.rdmore').hide() 

それとも、行き来しようとしている場合、あなたはそれを切り替え一つのイベント持つことができますで

$('p.rdmore').toggle() 

を最後のケースでは、jQueryが可視かどうかを判断して、それを逆にします。

Answer 3

より効率的な次のコードを使用することができます。

<script type='text/javascript'> 
$(function(){ 
$('p.rdmore').toggleClass('none inherit'); 
$('ul.post-ul-more').toggleClass('none inherit'); 
}); 
</script>