覆盖课程

Question

我使用了以下代码来切换它的工作正常但是当我们点击时，Div也会下降。而不是我想在用户点击它时显示div的覆盖（Z-index）显示下拉而不是切换如何实现此

jQuery(function($) {
  $('dd').hide()
  $(".navigation dt").click(function() {
    if ($(this).next('dd').is(":visible")) {
      $(this).next('dd').slideToggle('slow').toggleClass('close');
    } else {
      $(this).next('dd').slideToggle('slow').toggleClass('close');
    }
  });
});

Answer 1

您需要使用position更改下拉元素的position: absolute属性。

我使用position: absolute使用相对于其父级定位的下拉列表position: relative创建了一个非常基本的示例：

<div id="content">
  <div id="button"><!-- dropdown toggle --></div>
  <div id="subcontent">
    <!-- dropdown content -->
  </div>
</div>

这是对jQuery代码段的建议：

$(document).ready(function(){
    //hide the div '#subcontent'
  $('#subcontent').hide();
  //create click function for subcontent
  $('#button').click(function(){
    $('#subcontent').stop().slideToggle();
  });
});

JS FIDDLE DEMO

要使用这些，了解位置属性非常重要。你可以阅读它at w3schools。