CSS3下拉菜單假JS發出

Question

我試圖做一個下拉菜單與Jquery的和CSS3程式化。 我做了這份工作，這正是我想要的。 唯一的問題是這是一個與JQuery的訣竅。

我想隱藏/顯示一個div當我點擊我的菜單按鈕之一。 問題是它沒有完成這項工作。 但它的工作沒有訣竅。

下面的代碼工作：

https://jsfiddle.net/74ca3epv/2/

你可以看到這是工作，但

從.styledSelect

刪除display:none，你看這個節目/隱藏div不工作了。 我希望你能理解我的意思。 歡迎所有的評論:)謝謝！

Answer 1

你必須在這裏做出改變：

$listItems.click(function (e) { 
     e.stopPropagation(); 
     $styledSelect.text($(this).text()).removeClass('active'); 
     $this.val($(this).attr('rel')); 
     $list.hide(); 
     //alert($(this).attr('rel')); 

     if($(this).attr("rel")=="reservation1"){ 
       $("#information").hide(); 
       $("#reservation").show(); 
      } 
      if($(this).attr("rel")=="information1"){ 
       $("#reservation").hide(); 
       $("#information").show(); 
      } 
      if($(this).attr("rel")=="choose1"){ 
       $("#reservation").hide(); 
       $("#information").hide(); 
      } 

     /* alert($this.val()); Uncomment this for demonstration! */ 
    }); 

檢查Fiddle link.