应用css / javascript时，选择框丢失功能

Question

我有一个选择框来对图像进行分类，但是一旦我在其上应用样式，选择框就会停止将用户引导到类别。

当我删除HTML标题中的class=desktop时，选择框会再次显示。

Here is a jsbin以下内容：

function shuffle(e){var t=e.length,n,r;while(0!==t){r=Math.floor(Math.random()*t);t-=1;n=e[t];e[t]=e[r];e[r]=n}return e}function is(e,t){var n=Object.prototype.toString.call(t).slice(8,-1);return t!==undefined&&t!==null&&n===e}function updateVideosList(e){var t;var n=[];$.map(videos,function(r){if(is("String",r.category)){if(r.category===e){n.push(r)}}else{for(t=0;t<r.category.length;t++){if(r.category[t]===e){n.push(r)}}}});var r=shuffle(n.length>0?n:videos);var i=$("div#videos > ul");i.html("");r.forEach(function(e,t){var n=$("<li>");var r="";e.sources.forEach(function(e){r+=e.type+": "+e.src+"; "});n.text(r);i.append(n)});return r}function chooseRandomVideoFromList(){var e=Math.floor(Math.random()*currentList.length);var t=currentList[e];var n=$("video");n.html("");t.sources.forEach(function(e){var t=$("<source>").attr("type",e.type).attr("src",e.src);n.append(t)});$(".video-label").html(n.get(0).outerHTML)}function updateCategoryLabel(e){var t=$(".category-label");t.text(e||"All")}function updateView(e){updateCategoryLabel(e);currentList=updateVideosList(e);chooseRandomVideoFromList()}var videos=[{category:["landscape","abstract","technology"],sources:[{type:"video/webm",src:"http://zippy.gfycat.com/MinorGregariousGrub.webm"},{type:"video/mp4",src:"http://zippy.gfycat.com/MinorGregariousGrub.mp4"}]},{category:"abstract",sources:[{type:"video/webm",src:"http://zippy.gfycat.com/SpottedDefensiveAbalone.webm"},{type:"video/mp4",src:"http://zippy.gfycat.com/SpottedDefensiveAbalone.mp4"}]},{category:"technology",sources:[{type:"video/webm",src:"http://zippy.gfycat.com/ViciousUglyArabianoryx.webm"},{type:"video/mp4",src:"http://zippy.gfycat.com/ViciousUglyArabianoryx.mp4"}]}];var currentList;$(function(){updateView();$("select").on("change",function(){updateView(this.value)});$("a.play-video").on("click",function(){chooseRandomVideoFromList()})});(function(e,t,n,r){function o(t,n){this.element=t;this.options=e.extend({},s,n);this._defaults=s;this._name=i;this.instance;this.callbackManager=new Array;this.elem_isVisible="";this.init()}var i="heapbox",s={effect:{type:"slide",speed:"fast"},insert:"before",heapsize:r,emptyMessage:"Empty",tabindex:"undefined",title:r,showFirst:true,inheritVisibility:true,openStart:function(){},openComplete:function(){},closeStart:function(){},closeComplete:function(){},onChange:function(){}};o.prototype={init:function(){this._hideSourceElement();this._isSourceSelectbox();this.instance=this.createInstance();this._createElements();this._setDefaultValues()},createInstance:function(){return{heapId:e(this.element).attr("id")||Math.round(Math.random()*99999999),state:false}},_setEvents:function(){var t=this;this._setControlsEvents();e(n).on("click","html",function(e){e.stopPropagation();t._closeheap(true,function(){},function(){})})},_setSliderEvents:function(){var t=this;this.scrollingStatus=false;heap=e("#heapbox_"+this.instance.heapId+" .heap");heap.find(".sliderDown").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus()});heap.find(".sliderDown").mousedown(function(n){t.scrollingStatus=true;t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down");t.interval=setInterval(function(){t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down")},300)}).mouseup(function(e){clearInterval(t.interval);t.scrollingStatus=false}).mouseout(function(e){clearInterval(t.interval);t.scrollingStatus=false});heap.find(".sliderUp").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus()});heap.find(".sliderUp").mousedown(function(n){t.scrollingStatus=true;t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up");t.interval=setInterval(function(){t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up")},300)}).mouseup(function(e){clearInterval(t.interval);t.scrollingStatus=false}).mouseout(function(e){clearInterval(t.interval);t.scrollingStatus=false})},_setViewPosition:function(t){heap=e("div#heapbox_"+this.instance.heapId+" .heap");heap.show();var n=this;selected=t.find(".heapOptions li a.selected");firstTop=t.find(".heapOptions li a").first().offset().top;actTop=e(selected).offset().top;newTop=firstTop-actTop+this.sliderUpHeight;heapHeight=e("div#heapbox_"+this.instance.heapId+" .heapOptions").height();maxPosition=heapHeight-parseInt(this.options.heapsize,10)+this.sliderDownHeight;minPosition=0+this.sliderUpHeight;if(-1*newTop>maxPosition)newTop=-1*maxPosition;t.find(".heapOptions").css("top",newTop);if(!this.instance.state)heap.hide()},_setKeyboardEvents:function(){var t=this;heapbox=e("#heapbox_"+this.instance.heapId);heapbox.keydown(function(n){switch(n.which){case 13:t._handlerClicked();return false;break;case 27:t._closeheap();break;case 37:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up");n.preventDefault();break;case 39:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down");n.preventDefault();break;case 38:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"up");n.preventDefault();break;case 40:t._keyArrowHandler(e("#heapbox_"+t.instance.heapId),"down");n.preventDefault();break}})},_setMouseWheelEvents:function(){var t=this,n=e("div#heapbox_"+this.instance.heapId+" .handler"),r=n.find("div.heap");n.on("mousewheel",function(e,t){e.preventDefault();if(t==-1){r.find(".sliderDown").mousedown().mouseup()}else{r.find(".sliderUp").mousedown().mouseup()}})},_keyArrowHandler:function(t,n){var r=this;var i=false;t.find("div.heap ul li").each(function(){if(e(this).find("a").hasClass("selected")){i=true;selectItem=n=="down"?r._findNext(e(this)):r._findPrev(e(this));if(selectItem){r._heapChanged(r,selectItem,true);return false}}});if(i==false){selectItem=e("div#heapbox_"+r.instance.heapId+" .heapOptions .heapOption").first().find("a").addClass("selected");r._heapChanged(r,selectItem,true)}r._setViewPosition(e("#heapbox_"+r.instance.heapId))},_setMouseWheelEvents:function(){var t=this,n=e("div#heapbox_"+this.instance.heapId),r=n.find("div.heap");n.on("mousewheel",function(e,t){e.preventDefault();if(t==-1){r.find(".sliderDown").mousedown().mouseup()}else{r.find(".sliderUp").mousedown().mouseup()}})},_findPrev:function(e){if(e.prev().length>0){if(!e.prev().find("a").hasClass("disabled")){return e.prev().find("a")}else{return this._findPrev(e.prev())}}},_findNext:function(e){if(e.next().length>0){if(!e.next().find("a").hasClass("disabled")){return e.next().find("a")}else{return this._findNext(e.next())}}},_createElements:function(){var t=this;heapBoxEl=e("<div/>",{id:"heapbox_"+this.instance.heapId,"class":"heapBox",data:{sourceElement:this.element}});if(t.options.inheritVisibility==true&&t.elem_isVisible==false){heapBoxEl.css("display","none")}heapBoxHolderEl=e("<a/>",{href:"","class":"holder"});heapBoxHandlerEl=e("<a/>",{href:"","class":"handler"});heapBoxheapEl=e("<div/>",{"class":"heap"});heapBoxEl.append(heapBoxHolderEl);heapBoxEl.append(heapBoxHandlerEl);heapBoxEl.append(heapBoxheapEl);this.heapBoxEl=heapBoxEl;this._insertHeapbox(this.heapBoxEl)},_insertHeapbox:function(t){if(this.isSourceElementSelect&&this.options.insert=="inside")this.options.insert="before";switch(this.options.insert){case"before":e(this.element).before(t);break;case"after":e(this.element).after(t);break;case"inside":e(this.element).html(t);this._showSourceElement();break;default:e(this.element).before(t);break}},_setDefaultValues:function(){this._initHeap();this._initView(heapBoxEl);this._setHolderTitle();this._setTabindex();this._setEvents();this._handleFirst()},_setHeapboxFocus:function(){heapbox=e("div#heapbox_"+this.instance.heapId+" .handler");heapbox.focus()},_setHeapSize:function(){if(this.options.heapsize){if(heapBoxheapEl.height()<parseInt(this.options.heapsize,10)){delete this.options.heapsize;return}else{heapBoxheapEl.css("height",this.options.heapsize)}}},_initHeap:function(){var e;if(this.isSourceElementSelect){e=this._optionsToJson();this._setData(e)}},_initView:function(e){if(this._isHeapEmpty()){return}else{this._setViewPosition(e)}},_handleFirst:function(){if(!this.options.showFirst){e("div#heapbox_"+this.instance.heapId+" .heapOptions .heapOption").first().remove()}},_setHolderTitle:function(){var t=this;holderEl=e("#heapbox_"+this.instance.heapId).find(".holder");selectedEl=e("#heapbox_"+this.instance.heapId).find(".heap ul li a.selected").last();if(selectedEl.length!=0){if(this.options.title){holderEl.text(this.options.title)}else{holderEl.text(selectedEl.text())}holderEl.attr("rel",selectedEl.attr("rel"));if(selectedEl.attr("data-icon-src")){iconEl=this._createIconElement(selectedEl.attr("data-icon-src"));holderEl.append(iconEl)}}else{holderEl.text(this.options.emptyMessage);this._removeHeapboxHolderEvents();this._removeHeapboxHandlerEvents()}},_setTabindex:function(){var t;t=this.options.tabindex!="undefined"?this.options.tabindex:e(this.element).attr("tabindex");if(t!="undefined"){e("#heapbox_"+this.instance.heapId).attr("tabindex",t)}},_setData:function(t){var n=this;var r=jQuery.parseJSON(t);var i=false;heapBoxheapOptionsEl=e("<ul/>",{"class":"heapOptions"});e.each(r,function(){if(this.selected){i=true}heapBoxOptionLiEl=e("<li/>",{"class":"heapOption"});heapBoxheapOptionAEl=e("<a/>",{href:"",rel:this.value,title:this.text,text:this.text,"class":this.selected?"selected":"",click:function(e){e.preventDefault();e.stopPropagation();n._heapChanged(n,this)}});if(this.disabled){heapBoxheapOptionAEl.unbind("click");heapBoxheapOptionAEl.addClass("disabled");heapBoxheapOptionAEl.click(function(e){e.preventDefault();e.stopPropagation()})}if(this.icon){heapBoxheapOptionAEl.attr("data-icon-src",this.icon);heapBoxOptionIcon=n._createIconElement(this.icon);heapBoxheapOptionAEl.append(heapBoxOptionIcon)}heapBoxOptionLiEl.append(heapBoxheapOptionAEl);heapBoxheapOptionsEl.append(heapBoxOptionLiEl)});e("div#heapbox_"+this.instance.heapId+" .heap ul").remove();e("div#heapbox_"+this.instance.heapId+" .heap").append(heapBoxheapOptionsEl);this._setHeapSize();if(this._isHeapsizeSet()){this._createSliderUpElement();this._createSliderDownElement()}if(i!=true){e("div#heapbox_"+this.instance.heapId+" .heap ul li a").first().addClass("selected")}},_createSliderUpElement:function(){slideUp=e("<a/>",{"class":"sliderUp",href:""});e("div#heapbox_"+this.instance.heapId+" .heap .heapOptions").before(slideUp);sliderUp=e("#heapbox_"+this.instance.heapId+" .sliderUp");this.sliderUpHeight=parseInt(sliderUp.css("height"),10)+parseInt(sliderUp.css("border-top-width"),10)+parseInt(sliderUp.css("border-bottom-width"),10);e("#heapbox_"+this.instance.heapId+" .heapOptions").css("top",this.sliderUpHeight)},_createSliderDownElement:function(){slideDown=e("<a/>",{"class":"sliderDown",href:""});e("div#heapbox_"+this.instance.heapId+" .heap .heapOptions").after(slideDown);sliderDown=e("#heapbox_"+this.instance.heapId+" .sliderDown");this.sliderDownHeight=parseInt(sliderDown.css("height"),10)+parseInt(sliderDown.css("border-top-width"))+parseInt(sliderDown.css("border-bottom-width"))},_createIconElement:function(t){heapBoxOptionIcon=e("<img/>",{src:t,alt:t});return heapBoxOptionIcon},_optionsToJson:function(){var t=[];e(this.element).find("option").each(function(){t.push({value:e(this).attr("value"),text:e(this).text(),icon:e(this).attr("data-icon-src"),disabled:e(this).attr("disabled"),selected:e(this).is(":selected")?"selected":""})});var n=JSON.stringify(t);return n},_heapboxToJson:function(){var t=[];e("div#heapbox_"+this.instance.heapId+" .heap ul li a").each(function(){t.push({value:e(this).attr("rel"),text:e(this).text(),selected:e(this).is(":selected")?"selected":""})});var n=JSON.stringify(t);return n},_isHeapEmpty:function(){var t=e("div#heapbox_"+this.instance.heapId+" .heap ul li").length;return t==0},_setControlsEvents:function(){if(!this._isHeapEmpty()){this._setHeapboxHolderEvents();this._setHeapboxHandlerEvents();this._setKeyboardEvents();this._setSliderEvents();if(typeof e.event.special.mousewheel=="object"){this._setMouseWheelEvents()}}},_isSourceSelectbox:function(){this.isSourceElementSelect=e(this.element).is("select")},_isHeapsizeSet:function(){return this.options.heapsize?true:false},_refreshSourceSelectbox:function(t){var n=this;var r=false;e(this.element).find("option").remove();e.each(t,function(){option=e("<option/>",{value:this.value,text:this.text});if(this.selected){option.attr("selected","selected");r=true}e(n.element).append(option)});if(r!=true)e(n.element).find("option").first().attr("selected","selected")},_setSelectedOption:function(t){var n=this;this._deselectSelectedOptions();e(this.element).val(t);e(this.element).find("option[value='"+t+"']").attr("selected","selected")},_deselectSelectedOptions:function(){select=e(this.element).find("option");select.each(function(){e(this).removeAttr("selected")})},_setHeapboxHolderEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".holder").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus();t._handlerClicked()})},_setHeapboxHandlerEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".handler").click(function(e){e.preventDefault();e.stopPropagation();t._setHeapboxFocus();t._handlerClicked()})},_removeHeapboxHolderEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".holder").unbind("click");heapBoxEl.find(".holder").click(function(e){e.preventDefault()});heapBoxEl.unbind("keydown")},_removeHeapboxHandlerEvents:function(){var t=this;heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.find(".handler").unbind("click");heapBoxEl.find(".handler").click(function(e){e.preventDefault()})},_handlerClicked:function(e){if(this.instance.state){this._closeheap()}else{if(!e)this._closeOthers();else this._openheap()}},_heapChanged:function(t,n,r){if(!r)this._closeheap(true,function(){},function(){});this._setSelected(e(n));this._setHolderTitle();this._setHeapboxFocus();this._setSelectedOption(e(n).attr("rel"));this.options.onChange(e(n).attr("rel"),e(this.element))},_setSelected:function(e){this._deselectAll();e.addClass("selected")},_deselectAll:function(t){heapLinks=e("#heapbox_"+this.instance.heapId).find(".heap ul li a");heapLinks.each(function(){e(this).removeClass("selected")})},_closeheap:function(t,n,r){heapEl=e("#heapbox_"+this.instance.heapId).removeClass("open").find(".heap");if(heapEl.is(":animated")&&!t)return false;this.instance.state=false;if(t){n=n;r=r}else{n=this.options.closeStart;r=this.options.closeComplete}n.call();switch(this.options.effect.type){case"fade":heapEl.fadeOut(this.options.effect.speed,r);break;case"slide":heapEl.slideUp(this.options.effect.speed,r);break;case"standard":heapEl.css("display","none");r.call();break;default:heapEl.slideUp(this.options.effect.speed,r);break}},_openheap:function(){if(this._isHeapsizeSet()){this._setViewPosition(e("div#heapbox_"+this.instance.heapId))}heapEl=e("#heapbox_"+this.instance.heapId).addClass("open").find(".heap");if(heapEl.is(":animated"))return false;this.instance.state=true;this.options.openStart.call();switch(this.options.effect.type){case"fade":heapEl.fadeIn(this.options.effect.speed,this.options.openComplete);break;case"slide":heapEl.slideDown(this.options.effect.speed,this.options.openComplete);break;case"standard":heapEl.css("display","block");this.options.openComplete.call();break;default:heapEl.slideDown(this.options.effect.speed,this.options.openComplete);break}},_closeOthers:function(){var t=this;e("div[id^=heapbox_]").each(function(n){el=e("div#"+e(this).attr("id"));if(el.data("sourceElement")){sourceEl=e.data(this,"sourceElement");heapBoxInst=e.data(sourceEl,"plugin_"+i);if(t.instance.heapId!=heapBoxInst.instance.heapId){if(heapBoxInst.instance.state){t._callbackManager("change","_closeOthers",true);heapBoxInst._closeheap(true,function(){},function(){t._callbackManager("change","_closeOthers",false)})}}}});t._callbackManager("test","_closeOthers")},_callbackManager:function(e,t,n){if(!this.callbackManager[t])this.callbackManager[t]=0;if(e=="change"){n?this.callbackManager[t]++:this.callbackManager[t]--;this._callbackManager("test",t)}else if(e=="test"){if(this.callbackManager[t]==0)this._handlerClicked(true)}},set:function(e){this._setData(e);this._setHolderTitle();this._setEvents()},select:function(t){heapBoxEl=e("div#heapbox_"+this.instance.heapId);this._heapChanged(this,heapBoxEl.find('.heapOptions [rel="'+t+'"]'))},update:function(){this._setDefaultValues()},_hideSourceElement:function(){this.elem_isVisible=e(this.element).is(":visible");e(this.element).css("display","none")},_showSourceElement:function(){e(this.element).css("display","block")},hide:function(){e("div#heapbox_"+this.instance.heapId).css("visibility","hidden")},show:function(){e("div#heapbox_"+this.instance.heapId).css("visibility","visible")},disable:function(){heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.addClass("disabled");this._removeHeapboxHandlerEvents();this._removeHeapboxHolderEvents();return this},enable:function(){heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.removeClass("disabled");this._setEvents();return this},_remove:function(){heapBoxEl=e("div#heapbox_"+this.instance.heapId);heapBoxEl.remove();this._showSourceElement()}};e.fn[i]=function(t,n){return this.each(function(){if(!e.data(this,"plugin_"+i)){e.data(this,"plugin_"+i,new o(this,t))}else{heapBoxInst=e.data(this,"plugin_"+i);switch(t){case"select":heapBoxInst.select(n);break;case"update":heapBoxInst.update();break;case"set":heapBoxInst.set(n);break;case"hide":heapBoxInst.hide();break;case"show":heapBoxInst.show();break;case"disable":heapBoxInst.disable();break;case"enable":heapBoxInst.enable();break;case"remove":heapBoxInst._remove();break}}})}})(jQuery,window,document)

.heapContainer{width:100%}.heapBox{clear:both;display:inline-block;line-height:35px;position:absolute;font-family:Arial,sans-serif;font-size:12px;font-weight:400;left:1%;top:2%;opacity:.5;z-index:1000;max-width:100%}.heapBox:hover{opacity:1}.heapBox *{margin:0;padding:0;outline:0}.heapBox.disabled .holder{color:#E64937}.heapBox a{text-decoration:none;color:#fff}.heapBox .holder{width:150px;overflow:hidden;background:#FF69B4;text-indent:20px;height:35px}.heapBox .handler{width:25px;background:url(gfx/heapbox_handler_bg.jpg) #FF69B4;height:35px}.heapBox .handler,.heapBox .holder{float:left;position:relative;text-align:left;z-index:10}.heapBox div.heap{display:none;position:absolute;list-style-type:none;left:0;width:175px;top:37px;overflow:hidden}.heapBox .heap .heapOptions{display:block;overflow:hidden;z-index:20;position:relative}.heapBox .heap a.sliderUp{display:block;width:100%;height:15px;background:url(gfx/slider_arrow_up.png) left left no-repeat #FF69B4;border-bottom:1px solid #CD6090;position:absolute;top:0;z-index:30}.heapBox .heap a.sliderDown{display:block;width:100%;height:15px;background:url(gfx/slider_arrow_down.png) left left no-repeat #FF69B4;border-top:1px solid #CD6090;position:absolute;bottom:0;z-index:30}.heapBox .heap .heapOptions .heapOption{z-index:20;position:relative;display:block;height:35px}.heapBox .heap .heapOptions .heapOption a{width:100%;display:block;background:#FF69B4;text-indent:20px;text-align:left}.heapBox .heap .heapOptions .heapOption a.selected,.heapBox .heap .heapOptions .heapOption a:hover{background:#CD6090;text-align:left}.heapBox .heap .heapOptions .heapOption a.disabled{color:#DA695D;text-align:left}

  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $(".desktop").heapbox();
    });
  </script>


  <select class="desktop" name="select">
    <option value="" selected>All</option>
    <option value="landscape">Landscape</option>
    <option value="technology">Technology</option>
    <option value="abstract">Abstract</option>
  </select>

  <hr>

  <h4>"<span class="category-label"></span>" videos</h4>

  <div id="videos">
    <ul></ul>
  </div>

  <hr>

  <a href="#" class="play-video">
    <div class="video-label">
      <video loop autoplay controls>
        Your browser does not support the <code>video</code> element.
      </video>
    </div>
  </a>

Answer 1

根据Heapbox documentation，在“事件和回调”部分中，您应该在首次声明堆箱时创建事件处理程序。因此，在您的HTML文件中，将.heapbox()调用调整为此类

$(document).ready(function() {
    $(".desktop").heapbox({
        'onChange':function() {
            updateView(this.value);
        }
    });
  });