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升級版本中被刪除

演示： 小提琴