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

Question

I'm trying to make my dropdown menu work in jquery, but for some reason the .select div keeps fading away with this script when it loads.

<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>

And I've got this script here -

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

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

Anything I'm doing wrong?

Also - I'm trying to figure out how would I change the content of .select based on what they click from .dropdown ? Or what is the most efficient way?

Answer 1

Use .fadeToggle()

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

fiddle DEMO

Read

.toggle() Deprecated > Deprecated 1.8 and removed inn after 1.9 .So you can not use it with 1.10

Deprecated Selector

Answer 2

You can do this:

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

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

As, .toggle(function, function, ... ) is removed in jQuery 1.9 upgrade release

Demo: Fiddle