使用 css 的下拉列表中的多个控件，例如按钮和文本框

Question

我的项目有两个要求。首先，当我点击按钮时，div 应该是可见和不可见的。我已经使用 JQuery 实现了这一点，如 link.Jsfiddle

所示

现在第二个要求是，我在第一种情况下打开 div，现在我必须打开同一个框，但作为下拉列表。这意味着如果我单击下拉列表 Filter，link 中给出的这个框应该打开，并且如果下面有东西，它应该覆盖，就像我的情况一样，我有网格。所以下拉菜单应该覆盖这个网格而不是替换它。我用谷歌搜索但没有找到任何合适的解决方案。我只需要那个能发挥魔力的控制。不是整个代码。

如果需要任何说明。请评论。谢谢。

Answer 1

注释掉我添加的代码。参见fiddle。首先你需要设置 position: absolute 然后添加 JS 来定位按钮下方的下拉菜单。

JS

    $(document).ready(function ()
    {

        $('#btn').live('click', function (event)
        {

            $('#div1').toggle('show');

        });
        // added the following script
        var offH = $('#btn').outerHeight();
        var offT = $('#btn').offset().top + offH;
        var offL = $('#btn').offset().left;
        $('#div1').css('top', offT+"px").css('left', offL+"px");
    });

CSS

   #div1{
       display:none;
       position: absolute;     /* ADDED THIS LINE */
   }

使用 css 的下拉列表中的多个控件，例如按钮和文本框

multiple controls like button and text boxes in dropdown list using css

html

javascript

css

jquery

dropdownbox