html span 加序号,在html span元素后面添加文本

我有一个需要编辑的动画，它引起了一些问题。在html span元素后面添加文本

在页面上我有一个V形图像，然后是一个文本容器，文本为more或less。此信息描述一个人，如果您单击V形或文本，窗口将展开，以便用户可以读取所有信息。

如果点击more，动画将展开(这很好)，并且文本切换为less。然而问题是，如果我点击雪佛龙动画扩展，但文本不会改变，所以我结束了一个已经扩大的动画，并且文字说明more它应该表示less。

我没有小提琴或codepen，但我确实有一些图像描述发生了什么事情。

这是动画

这之后，如果我点击字形，而不是实际的文本，该文本不会更改了。

我的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;

}