Javascript jquery切换不工作

我已经创建了一个函数，我想要一个div来增加高度和不透明度，当再次单击时，它应该返回到它的原始状态，所以我使用了切换函数来实现这一点。现在的问题是，当页面加载时，按钮会消失

$（文档）.ready（函数（）{
$（'#cm_now'）。切换（函数（）{
$（'.search_bx_ar'）.css({
“不透明度”：“1”
});
$（'.search_bx_ar'）.css({
“高度”：“40px”
});
});
});
.search\u bx\u ar{
位置：相对位置；
裕度：0 10px 0；
宽度：100%；
不透明度：0；
高度：0px；
过渡：轻松进出所有。5s；
-webkit过渡：轻松输入输出所有。5s；
-moz过渡：轻松输入输出所有。5秒；
}
.比较\u sr\u btn{
浮动：对；
宽度：25%；
左侧填充：15px；
利润率：15px 0 10px 0；
}
.现在就比较一下{
背景色：#2b7f7f；
颜色：#fff；
边界：无；
高度：40px；
线高：40px；
宽度：100%；
字体大小：12px；
文本转换：大写；
}
切换并不像你想象的那样。切换用于隐藏或显示元素。由于您在加载页面后立即运行该函数，因此按钮会立即隐藏，并带有一个漂亮的小动画


看看这是否符合您的要求：


var按钮状态=0；
$（文档）.ready（函数（）{
$（'cm_now'）。单击（函数（）{
如果（按钮状态==0）{
$（'.search_bx_ar'）.css（{'opacity'：'1'}）；
$（'search_bx_ar'）.css（{'height'：'40px'}）；
}否则{
$（'search_bx_ar'）.css（{'opacity'：'0.5'}）；
$（'search_bx_ar'）.css（{'height'：'20px'}）；
}
buttonState=1-buttonState；//在0和1之间切换的巧妙方法
});
});
.search\u bx\u ar{
位置：相对位置；
裕度：0 10px 0；
宽度：100%；
不透明度：0；
高度：0px；
过渡：轻松进出所有。5s；
-webkit过渡：轻松输入输出所有。5s；
-moz过渡：轻松输入输出所有。5秒；
}
.比较\u sr\u btn{
浮动：对；
宽度：25%；
左侧填充：15px；
利润率：15px 0 10px 0；
}
.现在就比较一下{
背景色：#2b7f7f；
颜色：#fff；
边界：无；
高度：40px；
线高：40px；
宽度：100%；
字体大小：12px；
文本转换：大写；
}

现在比较
在这里，您没有将任何单击处理程序添加到
[toggle.][2]

您只需调用documentready上的toggle，它将在加载dom后立即调用

toggle（）方法在选定对象的hide（）和show（）之间切换
元素

此方法检查选定图元的可见性。show（）正在运行
如果某个元素被隐藏。如果元素可见，则运行hide（）-此
创建切换效果

片段


$（文档）.ready（函数（）{
$（'cm_now'）。单击（函数（）{
$（'#cm_now'）。切换（函数（）{
$（'.search_bx_ar'）.css({
“不透明度”：“1”
});
$（'.search_bx_ar'）.css({
“高度”：“40px”
});
});
});
});
.search\u bx\u ar{
位置：相对位置；
裕度：0 10px 0；
宽度：100%；
不透明度：0；
高度：0px；
过渡：轻松进出所有。5s；
-webkit过渡：轻松输入输出所有。5s；
-moz过渡：轻松输入输出所有。5秒；
}
.比较\u sr\u btn{
浮动：对；
宽度：25%；
左侧填充：15px；
利润率：15px 0 10px 0；
}
.现在就比较一下{
背景色：#2b7f7f；
颜色：#fff；
边界：无；
高度：40px；
线高：40px；
宽度：100%；
字体大小：12px；
文本转换：大写；
}
您可以在单击按钮时切换按钮。其他方式切换按钮，并在文档准备就绪后消失


$（文档）.ready（函数（）{
$（“#cm_now”）。在（“单击”，函数（）{
$（this）.toggle（函数（）{
$（'.search_bx_ar'）.css({
“不透明度”：“1”
});
$（'.search_bx_ar'）.css({
“高度”：“40px”
});
});
});
});
.search\u bx\u ar{
位置：相对位置；
裕度：0 10px 0；
宽度：100%；
不透明度：0；
高度：0px；
过渡：轻松进出所有。5s；
-webkit过渡：轻松输入输出所有。5s；
-moz过渡：轻松输入输出所有。5秒；
}
.比较\u sr\u btn{
浮动：对；
宽度：25%；
左侧填充：15px；
利润率：15px 0 10px 0；
}
.现在就比较一下{
背景色：#2b7f7f；
颜色：#fff；
边界：无；
高度：40px；
线高：40px；
宽度：100%；
字体大小：12px；
文本转换：大写；
}


$（“.cm\u now”）。单击（函数（）{
$（'.cm_now'）.toggleClass（“搜索动画”）；
});
.search\u bx\u ar{
位置：相对位置；
裕度：0 10px 0；
宽度：100%；
不透明度：0；
高度：0px；
过渡：轻松进出所有。5s；
-webkit过渡：轻松输入输出所有。5s；
-moz过渡：轻松输入输出所有。5秒；
}
.比较\u sr\u btn{
浮动：对；
宽度：25%；
左侧填充：15px；
利润率：15px 0 10px 0；
}
.cm_现在{
背景色：#2b7f7f；
颜色：#fff；
边界：无；
高度：40px；
线高：40px；
宽度：100%；
字体大小：12px；
文本转换：大写；
}
肖克先生{
高度：10px；
不透明度：1；
}

jsfiddle link请…@Mr_Panda He这样做了。现在请检查m更新的问题。那么我应该怎么做？解决方案是什么？@UsmanKhan我已经编辑了我的答案，看看这是否对你有帮助。我想我已经解决了你想要发生的事情，但是如果不让我知道，我会看看我是否可以做更多的帮助：）但是当我再次单击时，它没有达到它的原始状态这是迄今为止最接近的解决方案。。您可能需要删除或调整原始css中的高度，并使用jquery将其设置为正确工作（重要的是，jquery不起作用）什么是“原始状态”-无比较按钮？你可以加上这一点，这就是他想做的。