Overlay the class

Overlay the class

本文关键字：class the Overlay      更新时间：2023-09-26

我使用了Below Code来切换它工作得很好，但每当我们点击时，Belowdiv也会下降。相反，我想在用户点击时覆盖（Z-index）div，它显示下拉列表，而不是切换如何获取这个

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');
    }
  });
});

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

我创建了一个非常基本的例子，使用相对于其父项定位的下拉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演示

要使用这些内容，了解位置属性非常重要。您可以在w3schools上阅读相关内容。

相关文章：