0

JQueryを使用したコンテンツの表示/非表示に関するリソースはたくさんありますが、この関数のスタイルを切り替える方法もわかりません。表示するテキストを切り替えることはできますが、アンカータグの背景画像としてボタンを使用しています。

これが私がする必要があることです。ボタンのデフォルトは[もっと見る]ですが、ボタンをクリックするとコンテンツが表示されます。ボタンに「表示を少なく」と表示されるように、クラス/スタイルを切り替えたいと思います。

最後に、これをページ内の複数の領域に追加するにはどうすればよいですか？領域ごとに個別の関数を作成する必要がありますか？

JQueryは次のとおりです。

<script type="text/javascript">
$(document).ready(function() { 
  $('#additionalContentBox').hide(); 
  $('.readmore').toggle(function(){ 
    $('#additionalContentBox').show(); 
  }, 
  function(){ 
    $('#additionalContentBox').hide();
    $('.readless').toggle(function(){ 
  }); 
});
</script>

HTML：

<a href="#/" class="readmore readless">Read Full Article</a>

<div id="additionalContentBox">
<p>pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et. ante ipsum primis in faucibus</p>
</div>

最後に、CSS：

.readmore{
    display: block;
    background-image: url(img/readmore15.png);
    text-indent: -10000px;
    background-repeat: no-repeat;
    background-position: bottom left;
    display: block;
    height: 18px;
    line-height: 18px;
    width: 100px;
    margin-left: 4px;
    margin-top: 4px;
    margin-bottom: -14px;
}


.readless{
    background-image: url(img/readmore15.png);
    background-position: top left;
}
4

3 に答える 3

1

次のような簡単なことを試すことができます。

$('#your-link').click(function(){
    $(this).toggleClass('readless');
    $('#your-div').toggle();
});
于 2012-07-31T14:49:07.287 に答える
0

「a」タグに ID を付け、jQuery でそれを使用して選択します。

ID にボタンの一般的な CSS プロパティを指定します。

また、「readmore」のクラスも最初から保持し、CSS で「readmore」の背景プロパティを指定します。

初めてクリックしたときは、jQuery を使用して「readmore」クラスを削除し、「readless」クラスを追加します。

jQuery("#myID").removeClass("readmore").addClass("readless")
于 2012-07-31T14:49:27.787 に答える
0

マークアップを少し変更して、「additionalContentBox」を ID ではなくクラスにすることをお勧めします。できれば、JS が非表示になるのを待つ必要がないように、その要素にデフォルトのスタイル 'display:none' を与えることもできます。また、「readless」クラスをまだ持っていない要素から始めるかもしれません。したがって、マークアップは次のようになります。

 <a href="#/" class="readmore">Read Full Article</a>
<div class="additionalContentBox" style="display: none;">
<p>pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas.    Vestibulum ante ipsum primis in faucibus orci luctus et. ante ipsum primis in faucibus</p>
</div>

次に、jquery を次のように設定します。

$(document).ready(function() {
  $('.readmore').click(function(){
    if ($(this).hasClass('readless')){
      $(this).removeClass('readless');
    }else{
      $(this).addClass('readless');
    };
   $(this).next('.additionalContentBox').toggle('fast');
  });
});
于 2012-07-31T14:57:02.353 に答える