如何隱藏我的下拉菜單選項？

Question

我有一個下拉菜單，“ 班級視圖”是我的默認選項。

當我點擊箭頭時，我有這個

---

我試圖隱藏“ 班級視圖”選項，然后將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/

Java腳本

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

在document.ready ：

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

只需將默認類添加到要設置為默認的元素即可。

希望對您有幫助！ ;）

Answer 2

您已經將jquery選擇器誤認為是class-view而不是類的類class-view 。 因此，用#代替. 然后使用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演示

Answer 3

您可以嘗試通過替換以下內容

$classView.hide(); // I tried

與

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

JSFiddle演示