jquery - 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并在 .so 之后删除了 inn，1.9因此您不能将其与1.10

不推荐使用的选择器

Answer 2

你可以这样做：

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

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

As,在jQuery 1.9 升级版本.toggle(function, function, ... )中被移除

演示：小提琴