Div选择下拉菜单jquery切换和选项

Question

我正在尝试让我的下拉菜单在jquery中工作，但由于某种原因，.select div在加载时会随着这个脚本逐渐消失。

<div class="select">Select your option</div>
<div class="dropdown">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
</div>

我在这里有这个脚本 -

<script>
$(document).ready(function () {
    $(".select").toggle(function () {
        $(".dropdown").fadeIn("slow");
    },

    function () {
        $(".dropdown").fadeOut("slow");
    });
});
</script>

我做错了什么？

另外 - 我正在试图弄清楚如何根据他们从.dropdown点击的内容更改.select的内容？ 或者最有效的方法是什么？

Answer 1

使用.fadeToggle（）

$(document).ready(function () {
    $(".select").click(function () {
        $(".dropdown").fadeToggle("slow");
    });
});

小提琴演示

读

.toggle（） Deprecated > Deprecated 1.8并在1.9之后删除了客栈。所以你不能将它与1.10

不推荐使用的选择器

Answer 2

你可以这样做：

$(document).ready(function () {
    $(".select").click(function () {
        $(".dropdown").fadeToggle("slow");
    });

    $('.dropdown li').click(function () {
        $(".select").text($(this).text());
    });
});

因为， .toggle(function, function, ... )在jQuery 1.9升级版本中被删除

演示： 小提琴