Question

我有一个代码：

$(document).ready(function(){
    $("<style type='text/css'> #menu ul { line-height: "+ height +"px } @media    all and (max-width:"+ menuHide +"px) { #menu ul { display:none; line-height:35px; position:absolute; top:"+ menuPosition +"px; left:0; background:#D58383; width:100%;} #menu ul li { display:block; margin:0; } #menu ul ul { position:initial; width:initial; margin-top:initial; line-height:35px !important; background:#f9f9f9;} #menu ul ul ul {background:#f9f9f9;} #menu ul ul ul {background:#f9f9f9;} .sub-menu { opacity:initial; visibility:initial; } #menuicon { display:inline-block; height:" + height + "px } } </style>").appendTo("head");
});

编写此代码有不同的方法吗？更清楚......像：

$(document).ready(function(){
$("<style type='text/css'> 
#menu ul { line-height: "+ height +"px } 
@media all and (max-width:"+ menuHide +"px) { 
    #menu ul { display:none; line-height:35px; position:absolute; top:"+ menuPosition +"px; left:0; background:#D58383; width:100%;} 
    #menu ul li { display:block; margin:0; } 
    #menu ul ul { position:initial; width:initial; margin-top:initial; line-height:35px !important; background:#f9f9f9;} 
    #menu ul ul ul {background:#f9f9f9;} 
    #menu ul ul ul {background:#f9f9f9;} 
    .sub-menu { opacity:initial; visibility:initial; } 
    #menuicon { display:inline-block; height:" + height + "px } }      
</style>").appendTo("head");
});

多行...

Answer 1

把它放在变量中。

var css = "your css";
css += "some more css";
$(css).append...

Answer 2

您可以像下面这样写。

$("<style type='text/css'> " +
    "#menu ul { line-height: " + height + "px } " +
    "@media    all and (max-width:" + menuHide + "px) { " +
         "#menu ul { display:none; line-height:35px; position:absolute; top:" + menuPosition + "px; left:0; background:#D58383; width:100%;} " +
         "#menu ul li { display:block; margin:0; } " +
         "#menu ul ul { position:initial; width:initial; margin-top:initial; line-height:35px !important; background:#f9f9f9;} " +
         "#menu ul ul ul {background:#f9f9f9;} " +
         "#menu ul ul ul {background:#f9f9f9;} " +
         ".sub-menu { opacity:initial; visibility:initial; } " +
         "#menuicon { display:inline-block; height:" + height + "px } " +
     "} " +
 "</style>").appendTo("head");

编写jquery代码的不同方式

2 个答案: