滾動用戶點擊與jquery手機上的標籤

我創建了一個表格系統與jquery點擊我的網站在手機上。滾動用戶點擊與jquery手機上的標籤

這裏是我的結構和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(); 
     } 
    }); 
});

它不是導致精確滾動點擊/有源標籤的位置工作的例子。

任何想法？

來源

2017-05-11 Anahit Ghazaryan

也有一堆的問題與您的代碼

代碼很凌亂，難以閱讀/理解。我強烈建議你緩存你的選擇器（使用變量）。再加上html很混亂，很多div和長名稱類，這樣寫就不是最理想的。

沒有必要的each()方法引起不必要的循環

，而不是.parent().parent()可以使用.parents()因爲它在DOC的說：The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree

反正，我改變了一下你的代碼，現在它可以按照你的想法工作。看看下面的代碼片段或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"> 
 
     \t \t \t \t \t \t \t <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> 
 
     <span class="aboutSectionMobileRowAnimatedPoligonWrap"> 
 
      \t \t \t \t \t \t \t <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"> 
 
     \t \t \t \t \t \t \t <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> 
 
     <span class="aboutSectionMobileRowAnimatedPoligonWrap"> 
 
      \t \t \t \t \t \t \t <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"> 
 
     \t \t \t \t \t \t \t <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> 
 
     <span class="aboutSectionMobileRowAnimatedPoligonWrap"> 
 
      \t \t \t \t \t \t \t <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"> 
 
     \t \t \t \t \t \t \t <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> 
 
     <span class="aboutSectionMobileRowAnimatedPoligonWrap"> 
 
      \t \t \t \t \t \t \t <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>

來源

2017-05-11 08:46:53

嘿嘿，謝謝你的smippet。是的，我同意你的意見，並會記下你的意見。是的，你是可怕的，排除菜單高度造成的問題，但我需要它被排除因爲我有固定的位置菜單，所以我可以在這裏做@Mihai T –

如果你可以分享整個HTML代碼（包括'mobileMenuwrap '）也許我可以幫助 –

這裏是https://jsfiddle.net/6u7s1wa4/4/ @Mihai T –

滾動用戶點擊與jquery手機上的標籤

回答

相關問題