Question

我想要一个按钮，当点击时会出现一个下拉框，顶部有一个小三角形，将其连接到按钮（类似于很多Google UI的样子）。这非常类似于jQuery ui中的下拉菜单或bootstrap中的popover。但是，我希望盒子基本上是一个空div。

我找到的最接近的是基金会所拥有的那个（http://foundation.zurb.com/docs/components/dropdown.html），但我不太了解他们的代码，足以按我想要的方式完全编辑它（我也不完全理解）如何使用指南针来做一些事情，比如改变最小宽度或改变三角形颜色 - 我假设三角形是主框后面的另一个div，半径为三角形？）。我还计划在盒子里面使用php / ajax，所以我担心与Foundation的兼容性。

所以问题是有人知道用JavaScript / jQuery做到这一点吗？

Answer 1

您可以使用jQuery＆＃39; .hide()，.show()和.toggle()来实现此类效果。然后，只需使用CSS即可了解您的需求。

示例:(从您的链接中提取HTML）

<div>
    <a href="#" id="drop1-link">Has Dropdown</a>
    <ul id="drop1">
        <li><a href="#">This is a link</a></li>
        <li><a href="#">This is another</a></li>
        <li><a href="#">Yet another</a></li>
    </ul>
</div>
<div>
    <a href="#" id="drop2-link">Has Content Dropdown</a>
    <div id="drop2">
        <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#drop1").hide();
        $("#drop2").hide();
    });

    $("#drop1-link").on('click', function(e) {
        e.preventDefault();
        $("#drop1").toggle();
    });

    $("#drop2-link").on('click', function(e) {
        e.preventDefault();
        $("#drop2").toggle();
    });
</script>

小提琴：http://jsfiddle.net/3b3xz/

EMPTY下拉内容框

1 个答案: