0

我对一个脚本有问题。我相信这很简单，不幸的是对我来说不是那么简单。我想要做的是显示一个 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。非常感谢您的帮助。

4

2 回答 2

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

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

});
于 2013-01-25T23:27:34.340 回答
2

由于您设置的 CSS 属性末尾的冒号，您的代码不起作用：

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

删除它，它的工作原理：http: //jsfiddle.net/7tbsR/4/

（请注意，您的小提琴没有在左侧面板中选择 jQuery，因此这也无济于事。）

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

于 2013-01-25T23:29:32.840 回答