自動滾動到元素時打開此

我解釋一下我的小問題（對不起，我的英語名單上）：

我有元素的列表（格）左（大小限制）與滾動條（自動） （自定義滾動，但它與基本滾動相同的問題）。

所有這個「元素」可以打開（帶有「+」按鈕），在列表中打開一個「子元素」。

問題，通過舉例來說，如果你打開最後一個元素，你看不到的子元素無蝸殼這個子元素，我想加一個js滾動到這個開放的子元素」

我解釋與圖像我想你有什麼：http://www.nanosix.be/test/help.jpg

和我做一個簡單的版本的jsfiddle這裏： https://jsfiddle.net/9Lrhfqmk/

<body> 

    <div class="menu"> 
    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. 
     <div class="button">+</div> 
     <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> 
    </div> 

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. 
     <div class="button">+</div> 
     <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> 
    </div> 

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. 
     <div class="button">+</div> 
     <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> 
    </div> 

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. 
     <div class="button">+</div> 
     <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> 
    </div> 

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. 
     <div class="button">+</div> 
     <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> 
    </div> 

    <div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste. 
     <div class="button">+</div> 
     <div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div> 
    </div> 

    </div> 

    <script> 
    $(".button").click(function() { 
     $(this).parent(".ele").children(".other").toggleClass("displayblock"); 
    }); 

    </script> 

</body>

來源

2016-05-02 Jori Dupont

http://stackoverflow.com/questions/6677035/jquery - 滾動到元素 –

點擊'+'符號後，我可以看到子元素，滾動顯示正常。你能詳細解釋一下你的問題嗎？ – AbhiNickz

我看到子元素，這不是問題，問題是：我需要自動滾動到此「打開」元素，如果此元素不可見（例如：因爲用戶打開最後一個元素，所以子元素是出所以我需要一個自動滾動到 –

這裏是更新的小提琴：https://jsfiddle.net/9Lrhfqmk/2/

你必須做這樣的事情：

$(".button").click(function() { 
    var parent = $(this).parent(".ele"); 
    var other = parent.children(".other"); 
    other.toggleClass("displayblock"); 
    if(other.hasClass("displayblock")){ 
     $(".menu").scrollTop(other.offset().top); 
    } 
    else{ 
     $(".menu").scrollTop(parent.offset().top); 
    } 
});

來源

2016-05-02 15:38:32 rmacnell

不錯！：D但不完美，因爲當我關閉子元素（新點擊+）滾動到列表頂部... （如果列表很大，那麼重新找到父元素的問題），何時我關閉滾動需要休息的父元素 –

我更新了我的答案。在元素被摺疊的情況下，它滾動到「父母」而不是「其他」 – rmacnell

男士，你是如此美麗：D，非常感謝這個快速回答，（這是客戶最後兩次請求中的一個所以你真的幫我） thk很多，杜邦喬裏 –

向上，需要幫助的最後一個版本：https://jsfiddle.net/9Lrhfqmk/8/，帶滾動問題

    $(".button").click(function() { 
        var parentb = $(this).parent(); 
        var otherb = parentb.children(".other"); 
        otherb.toggleClass("displayblock"); 

            if(otherb.hasClass("displayblock")){ 
        $('.menu').animate({scrollTop: otherb.offset().top}, 1000); 
        } 
        else{ 
         $(".menu").off; 
        } 
         });

來源

2016-05-10 14:51:21

自動滾動到元素時打開此

回答

相關問題