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

fiddle DEMO

阅读

.toggle() Deprecated > Deprecated 1.8并在1.9之后移除了旅馆。因此您无法将其与1.10

一起使用

Deprecated Selector

Answer 2

你可以这样做：

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

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

正如jQuery 1.9 upgrade release

中删除了.toggle(function, function, ... )

演示：Fiddle

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

2 个答案: