Javascript 使用css的下拉列表中的按钮和文本框等多个控件

我的项目有两个要求。首先，当我点击按钮时，

div

应该是可见和不可见的。我已经使用JQuery实现了这一点，如本文所示

现在第二个要求是，在第一种情况下，我打开一个

div

，现在我必须打开同一个框，但作为下拉列表。这意味着，如果我点击下拉菜单

过滤器

，链接中给出的这个框应该打开，如果下面有什么东西，它应该覆盖，就像我的例子中的网格一样。所以下拉列表应该覆盖这个网格，而不是替换它。我在谷歌上搜索过，但没有找到合适的解决方案。我只需要一个能产生魔力的控制装置。不是完整的代码

---

如果需要任何澄清。请评论。谢谢。

注释掉了我添加的代码。看。 首先，您需要设置

位置：绝对

，然后添加JS以将下拉列表放置在按钮下方

JS

CSS

---

如果你可以投反对票，那么请给出理由和/或解决方案。你会在网格框中添加一个下拉列表吗？你想把它放在所有其他事情的首位吗？我没有投反对票我只想要下拉列表中的那个框。简单单击过滤器按钮时出现的框将出现在下拉列表中？？过滤器将显示为下拉列表？？但是我在你的小提琴中看不到下拉列表，你能添加它吗？或者如果你已经将它添加到你的项目中，并且网格框在下拉列表下面，那么尝试在css

z-index:9999

中设置网格框。不，我没有在小提琴中添加下拉列表。在我的小提琴里，盒子是

div

，现在拍一个场景，我有一个按钮，就在它下面，有一个文本框。现在在我的小提琴中，如果我点击这个按钮，框会出现，按钮下面的文本框会向下移动

    $(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");
    });

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