我正在尝试让一个 div 在您单击其上方的按钮时进行切换。我不确定我的代码有什么问题，但它不起作用。
在正确的位置使用样式标签进行编辑。代码仍然无法正常工作。
CSS 文件:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
/*CV Script*/
<script>$(document).ready(function(){
$('#button8').click(function(){
$('#conference8').toggle('slow');
});
});
</script>
<style>
#conference8 {
padding-left: 4em;
}
.button {
display: inline-block;
padding: 2px;
font-size: .8em;
cursor: pointer;
}
.button:active {
transform: translateY(2px);
}
</style>
</head>
HTML:
<button id="button8">Abstract</button>
<div id="conference8">blah blah blah</div>
最佳答案
您的 CSS 在 <script> 中标签。应该在<style>标签。
<head>
<STYLE type="text/css">
#conference8 {
padding-left: 4em;
}
.button {
display: inline-block;
padding: 2px;
font-size: .8em;
cursor: pointer;
}
.button:active {
transform: translateY(2px);
}
/*CV Script*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button8').click(function(){
$('#conference8').toggle('slow');
});
});
</script>
</head>
工作示例:
$(document).ready(function() {
$('#button8').click(function() {
$('#conference8').toggle('slow');
});
});#conference8 {
padding-left: 4em;
}
.button {
display: inline-block;
padding: 2px;
font-size: .8em;
cursor: pointer;
}
.button:active {
transform: translateY(2px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button8">Abstract</button>
<div id="conference8">blah blah blah</div>关于javascript - 单击按钮时的 Jquery 切换 div - 不切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37059504/