У меня есть следующий выпадающий список, который не является традиционным выпадающим списком 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>
0
Maria Nolorbe 19 Дек 2015 в 10:14

5 ответов

Лучший ответ

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

Используйте что-то вроде этого. Я надеюсь, что это поможет вам.

$(document).ready(function(){
    $('.dropdown .bird').click(function(){
    $('#section_1').toggle();
    $('#section_1').hide();    
  });
});
0
Ahmad Asjad 19 Дек 2015 в 07:28
$('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>
0
yjs 19 Дек 2015 в 07:31

Дать класс для таких записей, как;

<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);
});
0
blasteralfred Ψ 19 Дек 2015 в 07:37
 $(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);
    });

});
0
Ajay Dsouza 19 Дек 2015 в 09:17
$('#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 
}
0
iulo 19 Дек 2015 в 07:43