在同一類中選擇div

我有一個jQuery的難題。可以有人幫我選擇適當的div來滾動。現在它適用於第一個但其他人只是不工作。這裏是代碼：https://jsfiddle.net/fwm4ot69/在同一類中選擇div

這裏是JS代碼

$(document).ready(function() { 
    //hide answers or hide in css 
    $('.acc_content').hide(); 
    $('.acctitle').click(function() { 
     //show this answer 
     $(this).next().slideToggle('1000'); 
     //Hide the other panels 
     $(".acc_content").not($(this).next()).slideUp('fast'); 
     $.scrollTo($(this), 1000); 
    }); 
});

這是我的HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 

    <script src="//code.jquery.com/jquery-1.12.0.min.js"> 
    </script> 
    <div class="accordion"> 
     <div class="acctitle"> 
      <h3>What is This?</h3> 
     </div> 
     <div class="acc_content"> 
      <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. It has survived not 
      only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. It was popularised in the 1960s 
      with the release of Letraset sheets containing Lorem Ipsum 
      passages, and more recently with desktop publishing software like 
      Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 

     <div class="acctitle"> 
      <h3>What is This?</h3> 
     </div> 
     <div class="acc_content"> 
      <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. It has survived not 
      only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. It was popularised in the 1960s 
      with the release of Letraset sheets containing Lorem Ipsum 
      passages, and more recently with desktop publishing software like 
      Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 

     <div class="acctitle"> 
      <h3>What is This?</h3> 
     </div> 
     <div class="acc_content"> 
      <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. It has survived not 
      only five centuries, but also the leap into electronic typesetting, 
      remaining essentially unchanged. It was popularised in the 1960s 
      with the release of Letraset sheets containing Lorem Ipsum 
      passages, and more recently with desktop publishing software like 
      Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
    </div> 
</body> 
</html> 

What can i do to make the screen start on the selected question, esp on a mobile device? 

THanks

來源

2016-02-04 user3750366

首先，指定您如何訪問一個選定的頁面......如www.domain.com/question1或www.domain.com？q = 1或其他。然後顯示你如何生成HTML。你可以給任何元素一個ID或類，所以通過get vars或uri段來分配一個類是合乎邏輯的，然後在js中你只需檢查該元素的類$（'。selected'）.length，然後滾動到它在加載$ .scrollTo（$（'。selected'）。offset（）。top，1000）;這將有助於看到你的HTML。小提琴在這裏沒問題，所以編輯可能沒有必要，但不是每個人都會按照鏈接 –

我試圖啓動頁面上點擊的問題 – user3750366

頁面不點擊任何東西開始。他們必須知道選擇什麼東西，因此入站鏈接必須具有某種標識符。？q = 1，/ question/1，＃question1等等。你現在怎麼做？ –

好吧第一，你撥弄顯示控制檯錯誤。 $ .scrollTo不是一個函數。也許你沒有導入一個庫，或者只是因爲它不在小提琴庫中？無論哪種方式...

您可以更改$.scrollTo($(this), 1000);這樣：

$('html,body').animate({scrollTop: $(this).offset().top}, 1000);

如果console.log($(this).offset().top)你會看到，此函數返回一個有效的抵消。如果頁面足夠長以便滾動，它將只跳轉到該部分，並且只會滾動至頁面底部。

現在，您的問題似乎問如何跳轉到頁面加載問題。如果是這樣的話，你可以嘗試簡單的方法...

HTML：

<div class="acctitle" id="question-1"> 
    <h3>What is This?</h3> 
</div>

然後，你可以通過URL訪問：www.somedomain.com#question-1 這將錨定到該ID。但是，在js中，您可以添加：

$(document).ready(function(){ 
    if(window.location.hash) 
    { 
     $('html,body').animate({scrollTop: $(window.location.hash).offset().top}, 1000, function(){ 
      $(window.location.hash).next().slideDown(1000); 
     }); 
    } 
});

哪個應該加載頁面並且所請求的問題已展開。首先它將滾動，然後展開。

如果這不是你想要的讓我知道。

來源

2016-02-04 23:28:44

嗨，感謝您的幫助。我使用$（'html，body'）。animate（{scrollTop：$（this）.offset（）。top}，1000）;在我的代碼上。這工作。但只有當我刪除了向上滑動的代碼。我認爲問題是當「p」元素向上滑動時，它再次滾動頁面，導致頁面中間的內容。這在個人電腦或平板電腦上不是問題，但在移動設備上它會產生問題，因爲問題出現在頁面上方，並且屏幕從上到下覆蓋了答案。考慮重組代碼，以便首先將內容滑入內容，然後轉到相應的問題。你怎麼看？ – user3750366

另外。我不打算每次重新加載頁面。無論如何，我只是一名設計師，但它卻在擾亂我。我不明白很多代碼。所以再次感謝您的幫助。 – user3750366

對，你會看到在底部的例子中，我做了scrollTop {...}，1000，function（）{} - 該函數是回調函數。在持續時間之後是1000，因此您可以先滑動所有元素，然後使用.not（）行進行操作。因此，您可以將slideUp（'fast'）更改爲slideUp（'fast'，function（）{...}），然後在該回調中告訴它滑下所選元素。這樣它會壓縮dom，然後滾動到新元素，然後展開。應該解決在回調之外運行它的計算問題 –

在同一類中選擇div

回答

相關問題