Question

我有以下Dropdown List，这不是传统的SELECT和OPTION下拉列表。使用JQUERY，我想知道在选择给定选项时是否有办法执行操作。 EX - 当您单击下拉列表并选择BIRDS时，它将在页面的其他位置隐藏一些DIV。谢谢

<section class="main">
    <div class="wrapper">
        <div id="dd" class="wrapper-dropdown-3" tabindex="1">
            <span>View By Category</span>
            <ul class="dropdown">
                <li><a>Dogs</a></li>
                <li><a>Cats</a></li>
                <li><a>Birds</a></li>
            </ul>
        </div>
    </div>
</section>

Answer 1

https://jsfiddle.net/o8h4gvgd/5/

使用这样的东西。我希望这会对你有所帮助。

$(document).ready(function(){
    $('.dropdown .bird').click(function(){
    $('#section_1').toggle();
    $('#section_1').hide();    
  });
});

Answer 2

＆＃13;

$('div#dd ul.dropdown li a').on('click', function() {var clsName = $(this).parent().attr('name'); $("."+clsName).hide()});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<section class="main">
            <div class="wrapper">
                <div id="dd" class="wrapper-dropdown-3" tabindex="1">
                    <span>View By Category</span>
                    <ul class="dropdown">

                        <li name='dogs'><a href="javascript:">Dogs</a></li>
                        <li name='cats'><a href="javascript:">Cats</a></li>
                        <li name='birds'><a href="javascript:">Birds</a></li>

                </ul>
                </div>
            </div>
        </section>

<div class='dogs'>Div with dogs info</div>
<div class='cats'>Div with cats info</div>
<div class='birds'>Div with birds info</div>

＆＃13;

Answer 3

为类似的条目提供课程;

<li><a class="item">Dogs</a></li>
<li><a class="item">Cats</a></li>
<li><a class="item">Birds</a></li>

然后，使用像{; p>这样的click事件

$(".item").click(function(){
    item = $(this).text();
    alert(item);
});

Answer 4

 $(document).ready(function  () {

    //Your function on what needs to be done on click
    var liClicked = function(obj){
        alert("You Clicked : "+$(obj).html());
    }

    //trigger the onclick based on selected -- in this case '#dd ul.dropdown li a'
    $(document).on("click","#dd ul.dropdown li a", function(){
        //call the above written function
        liClicked(this);
    });

});

使用jquery下拉列表操作

4 个答案: