使用 jquery 的下拉列表操作

Question

我有以下下拉列表，它不是传统的 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

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

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

Answer 3

给像这样的条目一个 class;

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

然后，使用 click 事件，例如；

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

Answer 4

$('#dd ul.dropdown a').click(function() {
var _this = $(this);
var index = $('#dd ul.dropdown a').index(_this);

alert(index);

if (index === 2) {
    alert(_this.text());
    // ..do anything you want 
}

Answer 5

 $(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 的下拉列表操作

Dropdown list actions using jquery

javascript

jquery

html

html-select