Question

我只想在用户单击菜单项后用动画打开一个div。例如，当单击第二个项目时，单击的项目和上一个项目应推到页面顶部，而下面的项目应推到页面底部。

jQuery(document).ready(function($) {
		$('ul li a').on('click', function(){
    	$(this).parent().next().css({
      'display':'block'
      })
    })
});

ul{
  list-style: none;
  background: #eee;
  padding: 0;
  margin: 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 200px;
}

.js_item{
  display:none;  
}

li a{
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

a:hover{
    background: #9c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
    <li><a href="#">main menu1</a></li>
    <div class="load_content_for_menu_1 js_item">1</div>
    <li><a href="#">main menu2</a></li>
    <div class="load_content_for_menu_2 js_item">2</div>

    <li><a href="#">main menu3</a></li>
     <div class="load_content_for_menu_3 js_item">3</div>
    <li><a href="#">main menu4</a></li>
    <div class="load_content_for_menu_4 js_item">4</div>
    <li><a href="#">main menu5</a></li>
    <div class="load_content_for_menu_5 js_item">5</div>

</ul>

Answer 1

注意：我对您的html结构进行了小幅修改，以使每个.toggled_content <div>是每个<li>的子代。

使用以下jQuery方法，您可以实现这一目标。

slideToggle()

以滑动方式显示或隐藏匹配的元素。

toggleClass()

根据类的存在或状态参数的值，从匹配的元素集中的每个元素中添加或删除一个或多个类。

find()

获取当前匹配元素集中每个元素的后代，并通过选择器，jQuery对象或元素进行过滤。

var allContent = $("li");
allContent.find(".toggled_content").hide();

$(".toggler").on("click", function() {
  var $thisParent = $(this).parent();
  if (!$thisParent.hasClass('open')) {
    $thisParent
      .parent()
      .find(".open")
      .toggleClass("open")
      .find(".toggled_content")
      .slideToggle();
  }

  $thisParent
    .toggleClass("open")
    .find(".toggled_content")
    .slideToggle();
});

ul {
  list-style: none;
  background: #eee;
  padding: 0;
  margin: 0;
}

li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
}

a:hover {
  background: #9c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="main">
  <li>
    <a href="#" class="toggler">main menu1</a>
    <div class="toggled_content">1</div>
  </li>
  <li>
    <a href="#" class="toggler">main menu2</a>
    <div class="toggled_content">2</div>
  </li>
  <li>
    <a href="#" class="toggler">main menu3</a>
    <div class="toggled_content">3</div>
  </li>
  <li>
    <a href="#" class="toggler">main menu4</a>
    <div class="toggled_content">4</div>
  </li>
  <li>
    <a href="#" class="toggler">main menu5</a>
    <div class="toggled_content">5</div>
  </li>
</ul>

编辑：

或者只需使用jquery-ui accordion widget。

$("#accordion").accordion({
  heightStyle: "fill",
  active: 3
});

$("#accordion").on("accordionactivate", function(event, ui) {
  const offset = ui.newHeader[0].offsetTop;
  $([document.documentElement, document.body]).animate({
    scrollTop: offset
  }, 200);
});

body {
  margin: 0;
}
.ui-accordion {
  height: 200vh; /* simulate height with content */
  background: #eee;
}
.ui-accordion-header {
  margin: 0;
  padding: 10px 15px;
  font-weight: normal;
}
.ui-accordion-header:hover {
  background: #9c0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="accordion">
  <h3>main menu 1</h3>
  <div>1</div>
  <h3>main menu 2</h3>
  <div>2</div>
  <h3>main menu 3</h3>
  <div>3</div>
  <h3>main menu 4</h3>
  <div>4</div>
</div>

Answer 2

这可能比看起来要复杂一些，因为您可能不希望将所有DIV制成全屏显示。相反，您希望所有DIV的标题保持可见，并且任何一个内容div的内容都填充所有剩余的垂直空间。

jQueryUI使用其accordion tabs小部件为您完成此操作。您可以在项目中包括jQueryUI并使用其功能，也可以检查其代码并查看其效果，然后修改其代码以在自己的项目中工作。

要合并jQueryUI很简单：只需在调用jQuery 之后立即以与添加jQuery相同的方式添加它（也就是说，您还需要jQuery才能使jQueryUI正常工作，并且指向jQueryUI的链接必须遵循jQuery的链接）。有关代码示例，请参见this link。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Answer 3

我没有添加.css()，而是添加了.show()。通过添加display:block

基本上可以做到这一点

尝试添加打击

jQuery(document).ready(function($) {
  $('ul li a').on('click', function() {
    $('.js_item').hide('slow')
    $(this).parent().next().show('slow')

  })
});

ul {
  list-style: none;
  background: #eee;
  padding: 0;
  margin: 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 200px;
}

.js_item {
  display: none;
}

li a {
  position: relative;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
}

a:hover {
  background: #9c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="main">
  <li><a href="#">main menu1</a></li>
  <div class="load_content_for_menu_1 js_item">1</div>
  <li><a href="#">main menu2</a></li>
  <div class="load_content_for_menu_2 js_item">2</div>

  <li><a href="#">main menu3</a></li>
  <div class="load_content_for_menu_3 js_item">3</div>
  <li><a href="#">main menu4</a></li>
  <div class="load_content_for_menu_4 js_item">4</div>
  <li><a href="#">main menu5</a></li>
  <div class="load_content_for_menu_5 js_item">5</div>

</ul>

希望这会有所帮助！

从顶部和底部打开一个div

3 个答案:

编辑：