javascript - CSS3下拉菜单假JS问题

Question

我正在尝试使用Jquery 和css3 制作一个下拉 菜单。 我做了这份工作，这正是我想要的。 唯一的问题是它是 Jquery 的一个技巧。

我想在单击其中一个菜单按钮时隐藏/显示一个 div。 问题是它没有完成这项工作。 但它没有诀窍。

这里的代码工作:

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

你可以看到这是有效的，但是

remove the display:none from the .styledSelect

您会看到显示/隐藏 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.