.toggle()不起作用但添加溢出:隐藏

时间:2017-10-25 13:41:17

标签: jquery toggle this overflow



$(document).ready(function() {

  $('.post__action.post__circle.share').each(function() {
    $(this).click(function() {
      $(this).closest('ul').next('.share-button').toggle('scale', 800);
    })
  });

});

body {
  background: #eee;
  font-family: Helvetica, sans-serif;
  font-size: 13px;
  color: #000;
  margin: 0;
  padding: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: ;
}

.material-icons {
  vertical-align: middle;
}

p {
  margin: 0;
  text-align: justify;
}

blockquote {
  padding-top: 0px!important;
  border-left: 1px solid #eee;
  padding-left: 10px;
  margin: 0px 10px;
  padding-bottom: 0px!important;
}

b,
strong {
  font-weight: normal;
  color: #333;
}

img {
  opacity: 1;
  border: none;
  text-decoration: none;
  max-width: 100%;
}

small {
  font-size: calc(13px - 1px);
}

big {
  font-size: calc(13px + 1px);
}


/* POSTs */

#posts {
  width: 100%;
  height: auto;
  margin-bottom: 100px;
  margin-left: 50px;
}

.entry {
  position: relative;
  float: left;
  width: 300px;
  height: auto;
  margin: 10px;
  padding: 10px;
  background: #fff;
  text-align: center;
  border-radius: 10px;
}

.post-text,
.post-photo,
.post-photoset,
.post-quote,
.post-link,
.post-chat,
.post-video,
.post-audio,
.post-answer {
  width: 290px;
  max-height: 250px;
  min-height: 250px;
  overflow: hidden;
}

.post-info {
  margin-top: 10px;
}

.post-info .note-count {
  margin: 0 0.5rem 0.75rem 0;
  padding: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: pink;
  border-radius: 1.125rem;
  border: 3px solid pink;
}


/* Actions */

.post__actions {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.post__action>* {
  cursor: pointer;
  margin: 0 auto;
  line-height: 2.2rem;
}

.post__action:last-child {
  margin-right: 0;
}

@media (min-width: 769px) {
  .post__action>* {
    line-height: inherit;
  }
}


/* Post Circles */

.post__circle {
  background: pink;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0 0.5rem 0.25rem 0;
  border: 3px solid pink;
  border-radius: 1.125rem;
  line-height: 2.5rem;
  color: #fff;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.post__circle i {
  line-height: inherit;
}

.share-button {
  margin: 5px auto;
  width: calc(2.25rem*4);
  height: 2.25rem;
  line-height: 2.25rem;
  background: #eee;
  border-radius: 10px;
}

.share-button a {
  color: pink;
  font-size: 20px;
  margin: 5px;
  vertical-align: middle;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

.share-button a:hover {
  color: blue;
}

.tags {
  margin: 10px;
}

.post-info span {
  font-weight: 700;
  margin: 5px;
}

.tags a {
  background: none;
  color: pink;
  border: 2px solid pink;
  margin: 5px;
  padding: 5px;
  border-radius: 1.125rem;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.tags a:hover {
  background: pink;
  color: #fff;
}

.notes {
  overflow: auto;
  max-height: 300px;
  border: 2px solid pink;
  border-radius: 1.125rem;
}

ol.notes {
  list-style-type: none;
  font-style: normal;
}

ol.notes li.note {
  padding: 5px;
  display: inline-block;
  float: left;
}

.notes_loading,
.more_notes_link {
  font-weight: bold;
  float: left;
  text-align: left!important;
  text-transform: lowercase;
}

.notes img {
  width: 30px;
  border-radius: 0.5rem;
}

ol.notes li.note span.action {
  display: none!important;
}

ol.notes li.note .answer_content {
  font-weight: normal;
}


/* AUDIO */

.player {
  display: block;
  margin: auto;
  width: 40px;
  background: #fafafa;
  height: 40px;
  border-radius: 5px;
  overflow: hidden;
}

.audio_d {
  margin: 10px 0px;
  text-align: center;
  color: #222;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tumblr_audio_player {
  width: 30px;
  margin: 5px;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
}

.question {
  padding: 7px;
  margin-left: 2px;
  background: blue;
  color: #fff;
  text-align: left;
  border-radius: 5px;
}

.question img {
  width: 32px;
  height: 32px;
  margin-right: 7px;
  display: block;
  border-radius: 3px;
  float: left;
}

.asker {
  text-transform: uppercase;
  font-size: 7.5px;
  letter-spacing: 1px;
}

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="posts">
  <div class="entry song jacob_banks timbaland the_boy_who_cried_freedom alternative 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A3oNd8QPgEeDP5L4TfZLhGW&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/166775282763/jacob-banks-unknown-to-you-timbaland-remix">1 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="166775282763" data-blog-name="songsforyouu" id="like_button_166775282763"><iframe id="like_iframe_166775282763" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=166775282763&amp;color=white&amp;rk=ak1MqGSX" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_166775282763"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/166775282763/ak1MqGSX" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button" hidden="" style="overflow: hidden;"><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F166775282763%2Fjacob-banks-unknown-to-you-timbaland-remix" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F166775282763%2Fjacob-banks-unknown-to-you-timbaland-remix&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/166775282763/jacob-banks-unknown-to-you-timbaland-remix" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F166775282763%2Fjacob-banks-unknown-to-you-timbaland-remix" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2RKbDnB" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song secret_weapons as_the_setting_sun_comes_crashing_down_on_me pop 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A5qFDMxXqSYs00jaAHtnXfE&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165863459958/secret-weapons-something-new">0 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165863459958" data-blog-name="songsforyouu" id="like_button_165863459958"><iframe id="like_iframe_165863459958" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165863459958&amp;color=white&amp;rk=ifroaBPD" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165863459958"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165863459958/ifroaBPD" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button" hidden=""><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165863459958%2Fsecret-weapons-something-new" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165863459958%2Fsecret-weapons-something-new&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165863459958/secret-weapons-something-new" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165863459958%2Fsecret-weapons-something-new" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2QUEuns" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song jordan_rakei wallflower sorceress r_b_soul 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A0spiR9eDh1Fa9IQ2E3VrJW&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165735417998/jordan-rakei-sorceress">0 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165735417998" data-blog-name="songsforyouu" id="like_button_165735417998"><iframe id="like_iframe_165735417998" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165735417998&amp;color=white&amp;rk=ort7uX3Y" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165735417998"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165735417998/ort7uX3Y" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button" hidden=""><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165735417998%2Fjordan-rakei-sorceress" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165735417998%2Fjordan-rakei-sorceress&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165735417998/jordan-rakei-sorceress" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165735417998%2Fjordan-rakei-sorceress" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2QMcSYE" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song the_neighbourhood hard_ep alternative l3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A5ulSn7Zhh7MylcgUGvynDb&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165683106553/the-neighbourhood-you-get-me-so-high">5 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165683106553" data-blog-name="songsforyouu" id="like_button_165683106553"><iframe id="like_iframe_165683106553" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165683106553&amp;color=white&amp;rk=h478kUJx" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165683106553"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165683106553/h478kUJx" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button" hidden=""><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165683106553%2Fthe-neighbourhood-you-get-me-so-high" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165683106553%2Fthe-neighbourhood-you-get-me-so-high&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165683106553/the-neighbourhood-you-get-me-so-high" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165683106553%2Fthe-neighbourhood-you-get-me-so-high" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2QJUvBv" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song j_balvin willy_william mi_gen latino 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A4ipnJyDU3Lq15qBAYNqlqK&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165196471528/j-balvin-mi-gente">0 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165196471528" data-blog-name="songsforyouu" id="like_button_165196471528"><iframe id="like_iframe_165196471528" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165196471528&amp;color=white&amp;rk=hkBVkbFE" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165196471528"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165196471528/hkBVkbFE" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button" hidden=""><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165196471528%2Fj-balvin-mi-gente" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165196471528%2Fj-balvin-mi-gente&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165196471528/j-balvin-mi-gente" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165196471528%2Fj-balvin-mi-gente" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2PsUXpe" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

我试图切换单个&#39;分享&#39; div点击上面的li。我不得不使用this,因为有多个类似的div和不同的&#39;分享&#39;每个人都有div。这是我到目前为止使用的代码:

$(document).ready(function(){

    $('.post__action.post__circle.share').each(function() {
        $(this).click(function() {
            $(this).closest('ul').next('.share-button').toggle('scale', 800);
        })
    });

});

但div share-button并未切换,而是(在开发工具中)内联添加overflow: hidden样式。我不知道它为什么这样做。默认情况下隐藏div,样式表中没有溢出指示。 Here是该网站。它是每个帖子上的分享按钮。

感谢您的帮助!

(抱歉,该片段的HTML非常长,我很快就能让你看到它)

1 个答案:

答案 0 :(得分:0)

我通过用条件和显示/隐藏功能替换切换来解决了这个问题。但其他帖子覆盖了div,我添加了砌体。现在我的问题是,看起来砖石工程只需一次点击延迟。这是让它更清晰的例子:

$(document).ready(function() {

var $masonry = $('#posts').masonry({
  itemSelector: '.entry',
});

  $('.post__action.post__circle.share').each(function() {
  	var canShare = false;
    $(this).click(function() {
    	if (canShare == true){
        $(this).closest('ul').nextAll().first('.share-button').hide(800);
        canShare = !canShare;
    	} else {
      	$(this).closest('ul').nextAll().first('.share-button').show(800);
        canShare = !canShare;
      }
      $masonry.masonry();
    })
  });

});
body {
  background: #eee;
  font-family: Helvetica, sans-serif;
  font-size: 13px;
  color: #000;
  margin: 0;
  padding: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: ;
}

.material-icons {
  vertical-align: middle;
}

p {
  margin: 0;
  text-align: justify;
}

blockquote {
  padding-top: 0px!important;
  border-left: 1px solid #eee;
  padding-left: 10px;
  margin: 0px 10px;
  padding-bottom: 0px!important;
}

b,
strong {
  font-weight: normal;
  color: #333;
}

img {
  opacity: 1;
  border: none;
  text-decoration: none;
  max-width: 100%;
}

small {
  font-size: calc(13px - 1px);
}

big {
  font-size: calc(13px + 1px);
}


/* POSTs */

#posts {
  width: 100%;
  height: auto;
  margin-bottom: 100px;
  margin-left: 50px;
}

.entry {
  position: relative;
  float: left;
  width: 300px;
  height: auto;
  margin: 10px;
  padding: 10px;
  background: #fff;
  text-align: center;
  border-radius: 10px;
}

.post-text,
.post-photo,
.post-photoset,
.post-quote,
.post-link,
.post-chat,
.post-video,
.post-audio,
.post-answer {
  width: 290px;
  max-height: 250px;
  min-height: 250px;
  overflow: hidden;
}

.post-info {
  margin-top: 10px;
}

.post-info .note-count {
  margin: 0 0.5rem 0.75rem 0;
  padding: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: pink;
  border-radius: 1.125rem;
  border: 3px solid pink;
}


/* Actions */

.post__actions {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.post__action>* {
  cursor: pointer;
  margin: 0 auto;
  line-height: 2.2rem;
}

.post__action:last-child {
  margin-right: 0;
}

@media (min-width: 769px) {
  .post__action>* {
    line-height: inherit;
  }
}


/* Post Circles */

.post__circle {
  background: pink;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0 0.5rem 0.25rem 0;
  border: 3px solid pink;
  border-radius: 1.125rem;
  line-height: 2.5rem;
  color: #fff;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.post__circle i {
  line-height: inherit;
}

.share-button {
  margin: 5px auto;
  width: calc(2.25rem*4);
  height: 2.25rem;
  line-height: 2.25rem;
  background: #eee;
  border-radius: 10px;
  display:none;
}

.share-button a {
  color: pink;
  font-size: 20px;
  margin: 5px;
  vertical-align: middle;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

.share-button a:hover {
  color: blue;
}

.tags {
  margin: 10px;
}

.post-info span {
  font-weight: 700;
  margin: 5px;
}

.tags a {
  background: none;
  color: pink;
  border: 2px solid pink;
  margin: 5px;
  padding: 5px;
  border-radius: 1.125rem;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

.tags a:hover {
  background: pink;
  color: #fff;
}

.notes {
  overflow: auto;
  max-height: 300px;
  border: 2px solid pink;
  border-radius: 1.125rem;
}

ol.notes {
  list-style-type: none;
  font-style: normal;
}

ol.notes li.note {
  padding: 5px;
  display: inline-block;
  float: left;
}

.notes_loading,
.more_notes_link {
  font-weight: bold;
  float: left;
  text-align: left!important;
  text-transform: lowercase;
}

.notes img {
  width: 30px;
  border-radius: 0.5rem;
}

ol.notes li.note span.action {
  display: none!important;
}

ol.notes li.note .answer_content {
  font-weight: normal;
}


/* AUDIO */

.player {
  display: block;
  margin: auto;
  width: 40px;
  background: #fafafa;
  height: 40px;
  border-radius: 5px;
  overflow: hidden;
}

.audio_d {
  margin: 10px 0px;
  text-align: center;
  color: #222;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tumblr_audio_player {
  width: 30px;
  margin: 5px;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
}

.question {
  padding: 7px;
  margin-left: 2px;
  background: blue;
  color: #fff;
  text-align: left;
  border-radius: 5px;
}

.question img {
  width: 32px;
  height: 32px;
  margin-right: 7px;
  display: block;
  border-radius: 3px;
  float: left;
}

.asker {
  text-transform: uppercase;
  font-size: 7.5px;
  letter-spacing: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div id="posts">
  <div class="entry song jacob_banks timbaland the_boy_who_cried_freedom alternative 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A3oNd8QPgEeDP5L4TfZLhGW&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/166775282763/jacob-banks-unknown-to-you-timbaland-remix">1 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="166775282763" data-blog-name="songsforyouu" id="like_button_166775282763"><iframe id="like_iframe_166775282763" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=166775282763&amp;color=white&amp;rk=ak1MqGSX" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_166775282763"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/166775282763/ak1MqGSX" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button" style="overflow: hidden;"><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F166775282763%2Fjacob-banks-unknown-to-you-timbaland-remix" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F166775282763%2Fjacob-banks-unknown-to-you-timbaland-remix&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/166775282763/jacob-banks-unknown-to-you-timbaland-remix" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F166775282763%2Fjacob-banks-unknown-to-you-timbaland-remix" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2RKbDnB" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song secret_weapons as_the_setting_sun_comes_crashing_down_on_me pop 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A5qFDMxXqSYs00jaAHtnXfE&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165863459958/secret-weapons-something-new">0 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165863459958" data-blog-name="songsforyouu" id="like_button_165863459958"><iframe id="like_iframe_165863459958" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165863459958&amp;color=white&amp;rk=ifroaBPD" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165863459958"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165863459958/ifroaBPD" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button"><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165863459958%2Fsecret-weapons-something-new" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165863459958%2Fsecret-weapons-something-new&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165863459958/secret-weapons-something-new" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165863459958%2Fsecret-weapons-something-new" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2QUEuns" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song jordan_rakei wallflower sorceress r_b_soul 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A0spiR9eDh1Fa9IQ2E3VrJW&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165735417998/jordan-rakei-sorceress">0 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165735417998" data-blog-name="songsforyouu" id="like_button_165735417998"><iframe id="like_iframe_165735417998" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165735417998&amp;color=white&amp;rk=ort7uX3Y" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165735417998"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165735417998/ort7uX3Y" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button"><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165735417998%2Fjordan-rakei-sorceress" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165735417998%2Fjordan-rakei-sorceress&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165735417998/jordan-rakei-sorceress" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165735417998%2Fjordan-rakei-sorceress" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2QMcSYE" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song the_neighbourhood hard_ep alternative l3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A5ulSn7Zhh7MylcgUGvynDb&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165683106553/the-neighbourhood-you-get-me-so-high">5 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165683106553" data-blog-name="songsforyouu" id="like_button_165683106553"><iframe id="like_iframe_165683106553" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165683106553&amp;color=white&amp;rk=h478kUJx" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165683106553"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165683106553/h478kUJx" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button"><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165683106553%2Fthe-neighbourhood-you-get-me-so-high" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165683106553%2Fthe-neighbourhood-you-get-me-so-high&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165683106553/the-neighbourhood-you-get-me-so-high" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165683106553%2Fthe-neighbourhood-you-get-me-so-high" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2QJUvBv" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
  <div class="entry song j_balvin willy_william mi_gen latino 3min">
    <div class="post-video">
      <div class="video iframe resized" height="250"><iframe class="spotify_audio_player" src="https://embed.spotify.com/?uri=spotify%3Atrack%3A4ipnJyDU3Lq15qBAYNqlqK&amp;view=coverart" frameborder="0" allowtransparency="true" width="290" height="382"></iframe></div>
      <div class="caption"></div>
    </div>
    <div class="post-info"><a class="note-count" href="https://songsforyouu.tumblr.com/post/165196471528/j-balvin-mi-gente">0 <i class="material-icons">feedback</i></a>
      <ul class="post__actions list--unstyled">
        <li class="post__action post__circle">
          <div class="like_button" data-post-id="165196471528" data-blog-name="songsforyouu" id="like_button_165196471528"><iframe id="like_iframe_165196471528" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=5716f9145cbbcc5e21aa13229de5d4ed#name=songsforyouu&amp;post_id=165196471528&amp;color=white&amp;rk=hkBVkbFE" scrolling="no" width="15" height="15"
              frameborder="0" class="like_toggle" allowtransparency="true" name="like_iframe_165196471528"></iframe></div>
        </li>
        <li class="post__action post__circle"><a href="https://www.tumblr.com/reblog/165196471528/hkBVkbFE" class="reblog_button" style="display: block;width:15px;height:15px;"><svg width="100%" height="100%" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff"><path d="M5.01092527,5.99908429 L16.0088498,5.99908429 L16.136,9.508 L20.836,4.752 L16.136,0.083 L16.1360004,3.01110845 L2.09985349,3.01110845 C1.50585349,3.01110845 0.979248041,3.44726568 0.979248041,4.45007306 L0.979248041,10.9999998 L3.98376463,8.30993634 L3.98376463,6.89801007 C3.98376463,6.20867902 4.71892527,5.99908429 5.01092527,5.99908429 Z"></path><path d="M17.1420002,13.2800293 C17.1420002,13.5720293 17.022957,14.0490723 16.730957,14.0490723 L4.92919922,14.0490723 L4.92919922,11 L0.5,15.806 L4.92919922,20.5103758 L5.00469971,16.9990234 L18.9700928,16.9990234 C19.5640928,16.9990234 19.9453125,16.4010001 19.9453125,15.8060001 L19.9453125,9.5324707 L17.142,12.203"></path></svg></a></li>
        <li
          class="post__action post__circle share"><i class="material-icons">share</i></li>
      </ul>
      <div class="share-button"><a href="mailto:?subject=An%20audio%20post%20from%20SONGS&amp;body=%F0%9F%8E%B6%20%20https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165196471528%2Fj-balvin-mi-gente" class="material-icons">mail_outline</a>
        <a href="https://facebook.com/sharer.php?u=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165196471528%2Fj-balvin-mi-gente&amp;t=SONGS"
          class="fa fa-facebook"></a>
        <a href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=https://songsforyouu.tumblr.com/post/165196471528/j-balvin-mi-gente" class="fa fa-google-plus"></a>
        <a href="https://reddit.com/submit?url=https%3A%2F%2Fsongsforyouu.tumblr.com%2Fpost%2F165196471528%2Fj-balvin-mi-gente" class="fa fa-reddit-alien"></a>
        <a href="https://twitter.com/intent/tweet?text=%F0%9F%8E%B6%20%20https%3A%2F%2Ftmblr.co%2FZtjvPd2PsUXpe" class="fa fa-twitter"></a>
      </div>
    </div>
  </div>
</div>

jsfiddle

有谁知道为什么会这样?以及如何解决它?谢谢!