Question

我有一个我需要编辑的动画，这给我带来了一些问题。

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

如果我点击more动画展开（这很好），文字会切换到less。然而问题是，如果我点击雪佛龙，那么动画会扩展，但文本不会改变，所以我结束了一个已经扩展的动画，以及一个文本陈述more何时应该陈述{ {1}}。

我没有小提琴或编码器，但我确实有一些描述最新情况的图像。

这是在动画之前

如果我单击雪佛龙而不是实际文本，则文本不会更改。

我的JS有点长。（它也用咖啡文字写成）

less

我的观点是

  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

最后我的CSS

.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"

Answer 1

这是有道理的因为a.more_link with with images里面没有文字。

无论如何，我认为这个视图对于你想要实现的东西来说太复杂了，它使得js更加复杂和依赖。

将链接缩减为一个并更改一个类，您可以获得相同的结果，一切都变得更加整洁。我将尝试将其减少到仅在.person上有一个类并且内部样式依赖于它。甚至可以避免使用someonesActive与{3} {}相对于~的CSS .activePerson选择器...

.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
      %span.lessText= image_tag "moreArrow.png", alt: "more / less"

少：

.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;
  .lessText{
    display: none;
  }
  &.open{
    .moreText{
      display: none;
    }
    .lessText{
      display: block;
    }
  }
}

coffe（抱歉，如果语法不正确）

  personMore: ->
    $('a.moreLink').on 'click', (e) ->
      e.preventDefault()
      $this = $(this)
      $allPeople = $('.person')
      $this.toggleClass 'open'
      $this.siblings('p').toggleClass 'moreActive'
      if $this.hasClass('open')
        $allPeople.addClass('someonesActive').removeClass 'activePerson'
        $this.cosest('.person').removeClass('someonesActive').addClass 'activePerson'
      else
        $this.cosest('.person').removeClass 'activePerson'
      if $('.person.activePerson').length <= 0
        $allPeople.removeClass('someonesActive')
      return
    return

我试图想象你想要做什么，但这只是一个想法。

Answer 2

问题在于如何定义$ moreLink和$ lessLink变量：

$moreLink = $(this)
$lessLink = $(this).siblings('.lessText')

在此代码段中，您只是将点击的元素设为$moreLink，而您只将lessText 相邻的范围与所点击的元素{{1 }}。

实际上，您希望在单击元素时隐藏并显示两组跨度。

如果页面上只有这些动画中的一个，您可以将选择器切换为：

$lessLink

如果页面上有多个，您需要为每个动画添加额外的标识符或以其他方式过滤元素，即：

$moreLink = $('span.moreText')
$lessLink = $('span.lessText')

在html span元素

2 个答案: