javascript - 如何隐藏我的下拉菜单选项？

Question

我有一个下拉菜单，Class View 是我的默认选项。

当我点击箭头时，我有这个

---

我试图隐藏Class View 选项，并将Geary, Mia 设置为我的默认选项。我无法隐藏它。

---

HTML

<div class="row cb-btns-row " style="background-color:white;">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <div id="dd" class="wrapper-dropdown-1" tabindex="1">   <span>Class View </span>

            <ul class="dropdown">
                <li><a id="class-view" href="#">Class View</a>

                </li>
                <li><a id="student#1" class="student" href="#">Geary, Mia</a>

                </li>
            </ul>
        </div>
    </div>
</div>

---

JS

// dropDown Menu 
function dropDown(el) {

    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}


dropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.dd.on('click', function (event) {
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click', function () {
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue: function () {
        return this.val;
    },
    getIndex: function () {
        return this.index;
    }
}

$(function () {

    var dd = new dropDown($('#dd'));

    $(document).click(function () {

        $('.wrapper-dropdown-1').removeClass('active');

    });

    var $student = $('.student');
    var $classView = $('.classView');
    
    $classView.hide(); // I tried
    

  
});

---

我有什么

实时结果 = http://jsfiddle.net/bheng/8cnz2r67/1/show

实时代码 = http://jsfiddle.net/bheng/8cnz2r67/1/

Answer 1

您将 jquery 选择器误认为是 class-view，它是 id 而不是 class。所以用 # 代替 .，然后使用 closest() 隐藏它的父级 li。同样要设置默认值，请在 .wrapper-dropdown-1

下的第一个跨度中设置 student 的文本

var $student = $('.student');
 var $classView = $('#class-view');//its id and not class

 $classView.closest('li').hide(); //hide parent li
 //set default as student
 $('.wrapper-dropdown-1').find('span:first').text($student.text());

JSFiddle Demo