javascript - 使用 jquery 将用户滚动到移动设备上单击的选项卡

Question

我使用 jquery click 为我的移动网站创建了一个表格系统。

这是我的结构和 js 代码的工作示例 https://jsfiddle.net/anahitdev/6u7s1wa4/

jQuery('.aboutSectionMobileRowReadmoreBtn').each(function(){ 
    jQuery(this).click(function(){
        jQuery('.aboutSectionMobileRow').removeClass('activeAboutMobileSlide');
        jQuery('.aboutSectionMobileRowBottom').slideUp();
        if(!jQuery(this).parent().parent().find('.aboutSectionMobileRowBottom').is(':visible')){
            jQuery(this).parent().parent().addClass('activeAboutMobileSlide');
            jQuery(this).parent().parent().find('.aboutSectionMobileRowBottom').slideDown('fast', function(){
                jQuery('html, body').stop().animate({
                    scrollTop: jQuery('.aboutSectionMobileRow.activeAboutMobileSlide').find('.aboutSectionMobileRowBottom .aboutSectionIconWrap').offset().top - jQuery('.mobileMenuWrap').outerHeight()
                }, 1000);
            });
        }else{ 
            jQuery('.aboutSectionMobileRow').removeClass('activeAboutMobileSlide');
            jQuery(this).parent().parent().find('.aboutSectionMobileRowBottom').slideUp();
        }  
    });
});

它不会导致单击/事件选项卡的精确滚动位置。

有什么想法吗？

Answer 1

你的代码有很多问题

代码非常困惑且难以阅读/理解。我强烈建议您缓存选择器(使用变量)。再加上html很困惑，很多div和长名称的类，这样写并不是最优的。

不需要 each() 方法，因为它会导致不必要的循环

您可以使用 .parents() 而不是 .parent().parent() 因为正如 DOC 中所述:The .parents()和 .parent() 方法类似，只是后者仅在 DOM 树上向上移动一层

无论如何，我改变了你的代码，现在它可以按你想要的方式工作。在下面的代码片段或jsFiddle中查看它

var readmore = $('.aboutSectionMobileRowReadmoreBtn'),
  menuHeight = $(".mobileMenuWrap").outerHeight()


$(readmore).on("click", function() {
  var thisParent = $(this).parents(".aboutSectionMobileRow"),
    thisText = $(thisParent).find('.aboutSectionMobileRowBottom'),
    scrollTo = $(thisParent).offset().top - menuHeight


  $(thisParent).removeClass('activeAboutMobileSlide');
  $(thisText).slideUp();

  if (!$(thisText).is(':visible')) {
    $(thisParent).addClass('activeAboutMobileSlide');

    $(thisText).slideDown('fast')

    $('html, body').animate({

      scrollTop: scrollTo
    }, 1000);

  } else {
    $(thisParent).removeClass('activeAboutMobileSlide');
    $(thisText).slideUp();
  }
});

.mobileMenuWrap {
  display: block;
  width: 100%;
  float: left;
  padding: 8px 0;
  position: fixed;
  top: 0;
  z-index: 50;
  min-height: 50px;
}

.mobileMenuBg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1b1b2d;
  top: 0;
  left: 0;
  opacity: 0.9;
}

.mobileMenuInner {
  width: 90%;
  display: table;
  margin: auto;
  position: relative;
}

.aboutSectionMobileRows {
  display: block;
  width: 100%;
  float: left;
  padding: 66px 0;
}

.aboutSectionMobileRow {
  width: 100%;
  float: left;
  border-bottom: 2px solid #464667;
  padding: 14px 0;
}

.aboutSectionMobileRow:first-child {
  padding-top: 0;
}

.aboutSectionMobileRowTop {
  float: left;
  width: 100%;
}

.aboutSectionMobileRowTitle {
  width: 60%;
  float: left;
  line-height: 20px;
  margin: 0;
  text-align: left;
  font-family: 'kontrapunktbold';
  font-size: 20px;
  color: #ec3d5c;
  text-transform: uppercase;
}

.aboutSectionMobileRowReadmoreBtn {
  width: 29%;
  float: right;
  border: 1px solid #000;
  border-radius: 40px;
  padding: 11px 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.aboutSectionMobileRowReadmoreBtnTextWrap {
  width: 65%;
  float: none;
  display: table;
  margin: auto;
}

.aboutSectionMobileRowReadmoreBtnText {
  text-transform: uppercase;
  color: #000;
  font-family: 'kontrapunktbold';
  font-size: 12px;
  float: left;
}

.aboutSectionMobileRowAnimatedPoligonWrap {
  float: right;
  margin: 3px 0 0 0;
  position: relative;
}

.iosDevice .aboutSectionMobileRowAnimatedPoligonWrap {
  margin: 4px 0 0 0;
}

.aboutSectionMobileRowAnimatedPoligonLine {
  width: 24px;
  height: 1px;
  background: #fff;
  float: left;
  margin: 4px 0 0 0;
}

.aboutSectionMobileRowAnimatedPoligon {
  width: 9px;
  height: 8px;
  background: url(images/button_hexagon_white.svg) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 17px;
  transition: all 1s ease-in;
  -webkit-transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  -ms-transition: all 1s ease-in;
}

.aboutSectionMobileRowReadmoreBtn:hover .aboutSectionMobileRowAnimatedPoligon {
  -webkit-animation: color-me-in 1s;
  -moz-animation: color-me-in 1s;
  -ms-animation: color-me-in 1s;
  -o-animation: color-me-in 1s;
  animation: color-me-in 1s;
}

.aboutSectionMobileRowBottom {
  width: 100%;
  float: left;
  padding: 20px 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobileMenuWrap">
  <div class="mobileMenuBg"></div>
  <div class="mobileMenuInner">
    <div class="mobileMenuBtn">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="mobileMenuLogo">
      <a href="#"></a>
    </div>
  </div>
</div>

<div class="aboutSectionMobileRows">
  <div class="aboutSectionMobileRow">
    <div class="aboutSectionMobileRowTop">
      <h4 class="aboutSectionMobileRowTitle">Who are We</h4>
      <a class="aboutSectionMobileRowReadmoreBtn">
        <span class="aboutSectionMobileRowReadmoreBtnTextWrap">
        							<span class="aboutSectionMobileRowReadmoreBtnText">Read More</span>
        <span class="aboutSectionMobileRowAnimatedPoligonWrap">
            							<span class="aboutSectionMobileRowAnimatedPoligonLine"></span>
        <span class="aboutSectionMobileRowAnimatedPoligon"></span>
        </span>
        </span>
      </a>
    </div>
    <div class="aboutSectionMobileRowBottom">
      <div class="aboutSectionIconWrap">
        <div class="aboutSectionMobileAnimatedFigure">
          <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/Desk_500x500_48frames.png');background-size:100%;"></div>
        </div>
      </div>
      <div class="aboutSectionMobileTextWrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>
  </div>
  <div class="aboutSectionMobileRow">
    <div class="aboutSectionMobileRowTop">
      <h4 class="aboutSectionMobileRowTitle">Our Vision</h4>
      <a class="aboutSectionMobileRowReadmoreBtn">
        <span class="aboutSectionMobileRowReadmoreBtnTextWrap">
        							<span class="aboutSectionMobileRowReadmoreBtnText">Read More</span>
        <span class="aboutSectionMobileRowAnimatedPoligonWrap">
            							<span class="aboutSectionMobileRowAnimatedPoligonLine"></span>
        <span class="aboutSectionMobileRowAnimatedPoligon"></span>
        </span>
        </span>
      </a>
    </div>
    <div class="aboutSectionMobileRowBottom">
      <div class="aboutSectionIconWrap">
        <div class="aboutSectionMobileAnimatedFigure">
          <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/spider_49_500-min.png');background-size:100%;"></div>
        </div>
      </div>
      <div class="aboutSectionMobileTextWrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>
  </div>
  <div class="aboutSectionMobileRow">
    <div class="aboutSectionMobileRowTop">
      <h4 class="aboutSectionMobileRowTitle">Our History</h4>
      <a class="aboutSectionMobileRowReadmoreBtn">
        <span class="aboutSectionMobileRowReadmoreBtnTextWrap">
        							<span class="aboutSectionMobileRowReadmoreBtnText">Read More</span>
        <span class="aboutSectionMobileRowAnimatedPoligonWrap">
            							<span class="aboutSectionMobileRowAnimatedPoligonLine"></span>
        <span class="aboutSectionMobileRowAnimatedPoligon"></span>
        </span>
        </span>
      </a>
    </div>
    <div class="aboutSectionMobileRowBottom">
      <div class="aboutSectionIconWrap">
        <div class="aboutSectionMobileAnimatedFigure">
          <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/Book_500x500_72-min.png');background-size:100%;"></div>
        </div>
      </div>
      <div class="aboutSectionMobileTextWrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>
  </div>
  <div class="aboutSectionMobileRow">
    <div class="aboutSectionMobileRowTop">
      <h4 class="aboutSectionMobileRowTitle">Why Work With Us</h4>
      <a class="aboutSectionMobileRowReadmoreBtn">
        <span class="aboutSectionMobileRowReadmoreBtnTextWrap">
        							<span class="aboutSectionMobileRowReadmoreBtnText">Read More</span>
        <span class="aboutSectionMobileRowAnimatedPoligonWrap">
            							<span class="aboutSectionMobileRowAnimatedPoligonLine"></span>
        <span class="aboutSectionMobileRowAnimatedPoligon"></span>
        </span>
        </span>
      </a>
    </div>
    <div class="aboutSectionMobileRowBottom">
      <div class="aboutSectionIconWrap">
        <div class="aboutSectionMobileAnimatedFigure">
          <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/hi5_48_450-min.png');background-size:100%;"></div>
        </div>
      </div>
      <div class="aboutSectionMobileTextWrap">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </div>
    </div>
  </div>
</div>