Scrollen Benutzer auf angeklickte Registerkarte auf Handy mit jquery

Ich erstellte ein tabellarisches System mit jquery klicken Sie für meine Website auf Handy.Scrollen Benutzer auf angeklickte Registerkarte auf Handy mit jquery

Hier ist das Arbeitsbeispiel mit meiner Struktur und js Code 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(); 
     } 
    }); 
});

Es führt nicht exakte Position geklickt/aktiven Reiter zu scrollen.

Irgendwelche Ideen?

Quelle

2017-05-11 Anahit Ghazaryan

gut gibt es eine Reihe von Problemen mit Ihrem Code

der Code sehr chaotisch ist und schwer zu lesen/zu verstehen. Ich schlage vor, dass Sie Ihre Selektoren zwischenspeichern (verwenden Sie Variablen). plus die html ist es sehr verwirrend, viele divs und lange namen klassen, es ist nicht optimal, es so zu schreiben.

gibt es keine Notwendigkeit eines each() Methode, die eine unnötige Schleife

statt .parent().parent() verursacht Sie .parents() verwenden können, weil so heißt es in der DOC: The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree

wie auch immer, ich ein bisschen Code geändert und jetzt funktioniert es wie du willst. überprüfen Sie es unten im Code-Schnipsel aus oder in 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>

Quelle

2017-05-11 08:46:53

hey danke für die smippet. Ja, ich stimme Ihnen zu und werde Ihre Kommentare notieren. Und ja du warst recht, dass das Ausschließen der Menühöhe das Problem verursachte, aber ich brauche es, ausgeschlossen zu werden, weil ich fest positioniertes Menü habe, also was ich hier tun kann @Mihai T –

, wenn du den gesamten HTML Code teilen könntest (einschließlich der 'mobileMenuwrap ') vielleicht könnte ich helfen –

Hier ist es https://jsfiddle.net/6u7s1wa4/4/ @Mihai T –

Scrollen Benutzer auf angeklickte Registerkarte auf Handy mit jquery

Antwort

Verwandte Themen