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

Question

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

<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 升级发行版中删除

演示：小提琴