Question

我的一个脚本有问题。我相信这很简单，不幸的是对我来说并不那么简单。我要做的是显示一个div（点击后出现）。单击“产品”时应该会发生这种情况。到目前为止我所拥有的是：

   <div id="header">

    <div id="headcont"> 

            <div id="main-menu">
                <a href="#" id="button-products">Products</a>
            </div>

            <div id="products-menu">
                <a href="#">Jackleg units</a>
                <a href="#">Antivandal units</a>
                <a href="#">Storage containers</a>
            </div>

    </div>
</div>

和css：

    body{

    background-color:#666;

}

#header{
    position:absolute;
    top:0px;
    background-color: rgba(0, 0, 0, .9);
    width:100%;
    height:70px;
    border-bottom:1px #999 solid;
    padding:15px 0;
    z-index:200;
}

#headcont{
    overflow:hidden;
    width: 480px;
    margin: 0 auto;
}

#main-menu{
    margin-top:55px;
    float:right;
}

#main-menu a{
    display:block;
    width: auto;
    font-size:1.7em;
    float:left;
    margin: 0 10px;
    color:#eee;
}

#products-menu{
    overflow:hidden;
    background-color: rgba(255, 255, 255, .8);
    width:980px;
    display: none;
}

#products-menu a{
    display:block;
    width: auto;
    background-color:rgba(0, 0, 0, .6);
    padding: 5px;
    margin: 2px 5px 2px 0;
    text-decoration:none;
    font-size:1.7em;
    float:left;
    color:#eee;
}

主要的事情 - jquery：

$(function() {
    $('#button-products').on('click', function() {
        $('#products-menu').css("display:","block");
    });
});

这有点长，所以我用jsfiddle来帮助你理解我正在做的事情：JSFIDDLE。非常感谢你的帮助。

Answer 1

$("#products-submenu").click(function(){

    $("#products-menu").show(); //.fadeIn(600) //Nice Effect

});

Answer 2

由于您正在设置的CSS属性末尾的冒号，您的代码无效：

$('#products-menu').css("display:","block");
// remove this -----------------^

删除它并且有效：http://jsfiddle.net/7tbsR/4/

（请注意，您的小提琴没有在左侧面板中选择jQuery，因此也没有帮助。）

另请注意，jQuery提供了一些显示隐藏元素的方法，包括普通的.show()和几个animation methods，可以将隐藏的项目淡入或滑动到视图中。（对于您的菜单.slideDown()效果很好：http://jsfiddle.net/7tbsR/7/）

单击后显示div

2 个答案: