Question

我试图让页面跳到一个用JQuery打开的窗口，但我没有运气。

这是按钮行的Javascript（每个按钮在窗口中显示不同的信息），单击以打开窗口：

<div id="individuals-full">
  <h1 style="text-align: center;">Individuals</h1>
  <ul>
    <li>
      <a href="#adjustment-content">
        <div id="adjustment-of-status" class="individual-icons">Adjustment of Status</div>
      </a>
    </li>
    <li>
      <a href="#asylum-content">
        <div id="asylum" class="individual-icons">Asylum</div>
      </a>
    </li>
  </ul>
</div>

<div id="info-panel">
  <div id="adjustment-content" class="toggle" style="display:none">
    <hr/>
    <div class="down-arrow"></div>
    <h1>Adjustment</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="asylum-content" class="toggle" style="display:none">
    <hr/>
    <div class="down-arrow"></div>
    <h1>Asylum</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
    tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
</div>

jQuery("#individuals-full a").click(function(e) {
  e.preventDefault();
  jQuery(".toggle").hide();
  var toShow = jQuery(this).attr('href');
  jQuery(toShow).show();
});

function scrollToAnchor(aid) {
  var aTag = $("a[individuals-full='" + aid + "']");
  $('html,body').animate({
    scrollTop: aTag.offset().top
  }, 'slow');
}

$("#individuals-full a").click(function() {
  scrollToAnchor('#info-panel');
});

https://jsfiddle.net/xmb8a26u/2/

它打开并正常工作，但它不会向下滚动到窗口。另一个小问题是当你再次点击按钮时它不会关闭（它一旦打开就会保持打开状态）。这不是一个大问题，但是如果有一些我可以修改的东西，那么它会更好。

Answer 1

你应该使用.toggle（）;方法以打开和关闭div .. 查看文档：{{3}}

Answer 2

您可以使用它进行平滑滚动

// Smooth scroll 
  $('html, body').animate({
   scrollTop: $('#info-panel').offset().top + (0)
 }, 700);

**Complete Code**
jQuery("#individuals-full a").click(function(e){
e.preventDefault();        
jQuery(".toggle").hide();
var toShow = jQuery(this).attr('href');
jQuery(toShow).show();

// Smooth scroll 
  $('html, body').animate({
   scrollTop: $('#info-panel').offset().top + (0)
 }, 700);

 });

Answer 3

$(document).ready(function(){
$("#adjustment-of-status").click(function(){
	$(".toggle:first").css("display","block");
	$(".toggle:last").hide();
	});
	$("#asylum").click(function(){
		$(".toggle:last").css("display","block");
		$(".toggle:first").hide();
});
	});

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<div id="individuals-full">
  <h1 style="text-align: center;">Individuals</h1>
  <ul>
    <li>
      <a href="#adjustment-content">
        <div id="adjustment-of-status" class="individual-icons">Adjustment of Status</div>
      </a>
    </li>
    <li>
      <a href="#asylum-content">
        <div id="asylum" class="individual-icons">Asylum</div>
      </a>
    </li>
  </ul>
</div>

<div id="info-panel">
   <div id="adjustment-content" class="toggle" style="display:none">
    <hr/>
    <div class="down-arrow"></div>
    <h1>Adjustment</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="asylum-content" class="toggle" style="display:none">
    <hr/>
    <div class="down-arrow"></div>
    <h1>Asylum</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
    tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
</div>
</body>

用Jquery切换时强制滚动到div？

3 个答案: