CSS3下拉菜單偽造JS問題

Question

我正在嘗試使用Jquery和css3樣式化下拉菜單。 我完成了工作，這正是我想要的。 唯一的問題是，這是Jquery的一個把戲。

當我單擊菜單按鈕之一時，我想隱藏/顯示div 。 問題在於它不能完成任務。 但這沒有竅門。

代碼在這里工作：

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

您可以看到它正在工作，但是

從.styledSelect刪除display:none

並且您看到show / hide 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! */
    });

檢查小提琴鏈接。