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

Question

我有一个下拉菜单，类视图是我的默认选项。

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

我尝试隐藏 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

这是一个有效的演示：http://jsfiddle.net/8cnz2r67/9/

<强>的Javascript

dropDown.prototype = {
    //...
    setDefault: function(def) {
        this.placeholder.text(def)
    }
}

在document.ready：

中

var dd = new dropDown($('#dd'));
dd.setDefault($(".default").text())

只需将一个默认类添加到您想要设置为默认值的元素中。

希望它对你有所帮助！ ;）

Answer 2

你错误地认为class-view的jquery选择器是id而不是class。因此，请#代替.，然后使用li隐藏它的父closest()。另外要设置默认值，请在student下的第一个范围内设置.wrapper-dropdown-1的文字

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

Answer 3

您可以通过替换

来尝试以下操作

$classView.hide(); // I tried

与

$('.wrapper-dropdown-1').addClass('active');
$student.click();

JSFiddle Demo