0
私は編集が必要なアニメーションを持っており、それが私にいくつかの問題を引き起こしています。htmlスパン要素の後にテキストを追加する
私はシェブロンイメージを持っていて、次にテキストがmoreまたはlessのテキストコンテナがあります。この情報は人物を記述しており、シェブロンまたはテキストのいずれかをクリックすると、ウィンドウが展開され、ユーザーはすべての情報を読むことができます。
moreをクリックすると、アニメーションが展開され（良い）、テキストがlessに切り替わります。しかし、シェブロンをクリックしてアニメーションを拡大してもテキストは変わらないので、すでに展開されているアニメーションとlessのときはmoreというテキストが表示されます。
私はフィドルやコードペンを持っていませんが、何が起こっているのかを記述した画像があります。
これはアニメーション
私は山形をクリックして、ではない実際のテキスト、テキストが変更されない場合、これは後になる前です。
私のJSは少し長いです。 （そのもコーヒースクリプトで書かれた）
personMore: ->
$('a.moreLink').each ->
$thisMore = $(this).children('span.moreText')
$thisLess = $(this).children('span.lessText')
$(this).on 'click', (e) ->
e.preventDefault()
return
$thisMore.on 'click', (e) ->
$allPeople = $('.person')
$thisPerson = $(this).parents('.isotope')
$moreLink = $(this)
$lessLink = $(this).siblings('.lessText')
$thisP = $(this).parents('.moreLink').siblings('p')
$moreLink.hide()
$lessLink.show()
$thisP.toggleClass 'moreActive'
$thisPerson.removeClass('someonesActive').addClass 'activePerson'
e.preventDefault()
return
$thisLess.on 'click', (e) ->
$allPeople = $('.person')
$thisPerson = $(this).parents('.isotope')
$lessLink = $(this)
$moreLink = $(this).siblings('.moreText')
$thisP = $(this).parents('.moreLink').siblings('p')
$openItems = $('.moreActive').size()
$lessLink.hide()
$moreLink.show()
$thisP.toggleClass 'moreActive'
e.preventDefault()
if $openItems == 1
$('.person').removeClass 'activePerson'
return
return
return
私の見解である
.row
.person.col-sm-4.isotope
%a{href: "https://www.linkedin.com/in/harambe", target: "window"}
%h3 Harambe
%h4 Worlds Greatest Gorilla
= image_tag "harambe.jpg"
%p
Hot chicken gochujang kombucha artisan. Cornhole snackwave enamel pin helvetica, listicle pabst fingerstache blog. Neutra butcher tote bag activated charcoal, semiotics organic pitchfork forage woke. Brooklyn activated charcoal put a bird on it jean shorts. Fam subway tile readymade skateboard heirloom, ugh shabby chic vinyl echo park bespoke whatever. Disrupt microdosing vice tilde, tattooed chia mlkshk humblebrag master cleanse swag kickstarter. Activated charcoal gastropub vinyl, banjo raclette 90's deep v celiac bitters meh.
%a.sliding.moreLink{:href => "#"}
%span.moreText more
%span.lessText less
%a.moreLink{:href => "#"}
%span.moreText= image_tag "moreArrow.png", alt: "more/less"
%span.lessText= image_tag "moreArrow.png", alt: "more/less"
最後に私のCSS
.aboutPeople .person a.moreLink{
text-align: center;
display: block;
font-style: italic;
position: relative;
z-index: 99;
background: #ebebeb;
padding-bottom: 20px;
width: 80%;
margin: 0 auto;
}
これは非常に便利でした、あなたに近づいてくれてありがとう！ – kdweber89