摺疊後的JavaScript屏幕位置

我試過使用JavaScript隱藏div標籤，但是當它崩潰時，如何在屏幕位置屏蔽確切的潛水？摺疊後的JavaScript屏幕位置

JavaScript，CSS和HTML如下

// Hide all the elements in the DOM that have a class of "box" 
 
    $('.box').hide(); 
 

 
    // Make sure all the elements with a class of "clickme" are visible and bound 
 
    // with a click event to toggle the "box" state 
 
    $('.clickme').each(function() { 
 
     $(this).show(0).on('click', function (e) { 
 
      // This is only needed if your using an anchor to target the "box" elements 
 
      e.preventDefault(); 
 

 
      // Find the next "box" element in the DOM 
 
      $(this).next('.box').slideToggle('fast'); 
 
     }); 
 
    }); 
 

 
    $("#submit").click(function (e) { 
 
     e.preventDefault(); 
 
     $("#box1").slideToggle('fast'); 
 
     $("#box2").slideToggle('fast'); 
 
    });

body { 
 
    font: 12px/16px sans-serif; 
 
    margin: 10px; 
 
    padding: 0; 
 
    } 
 

 
    .clickme { 
 
    background-color: #eee; 
 
    border-radius: 4px; 
 
    color: #666; 
 
    display: block; 
 
    margin-bottom: 5px; 
 
    padding: 5px 10px; 
 
    text-decoration: none;} 
 

 
    } 
 

 
    .clickme:hover { 
 
    text-decoration: underline; 
 
    } 
 

 
    .box { 
 
    background-color: #ccc; 
 
    border-radius: 4px; 
 
    color: #333; 
 
    margin: 5px 0; 
 
    padding: 5px 10px; 
 
    width: auto; 
 
    }

<a href="#" class="clickme">Menu 1</a> 
 
    <span><span class="labelText"><span></span>Number 1</span> 
 
    </span> 
 
    <input type="text" value="" maxlength="50"> 
 
    <br/> 
 
    <span><span class="labelText"><span></span>Number 2</span> 
 
    </span> 
 
    <input type="text" class="inputclmsize1" value="" maxlength="50" aria-invalid="false"> 
 
    <br> 
 
    <a id="submit" href="#">Submit</a> 
 
    </div> 
 
    <a href="#" class="clickme">Menu 2</a> 
 
    <div id="box2" class="box"> 
 
     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, 
 
    </div>

我說這更多的文本數據的jsfiddle。我想要的是，我點擊菜單1後，有提交鏈接的結束。當我點擊菜單1中的提交鏈接時，自動菜單2打開。但不能以正確的位置打開屏幕。我想要在屏幕開始位置顯示菜單2。那麼如何定位呢？謝謝。你可以查看這個。

http://jsfiddle.net/rn4qdyue/14/

來源

2015-06-04 shgan

你可以在你想在頂部的元素的頂部位置使用parent和它的位置scrollTop。如果你希望它非常精確，你將不得不考慮其他值，如父母和邊距的偏移量。你可以在slide動畫之後調用它。就像這樣：

 $(this).next('.box').slideToggle('fast', function() { 
      $(this).parent().animate({ 
       scrollTop: $(this).position().top - $(this).parent().offset().top - 15 
      }) 
     })

見琴：http://jsfiddle.net/k5o3bL69/1/

來源

2015-06-04 05:29:14

摺疊後的JavaScript屏幕位置

回答

相關問題