Question

当您点击它上方的按钮时，我正试图让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>

Answer 1

您的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>

Answer 2

应该是：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style>
#conference8 {
padding-left: 4em;
}
.button {
display: inline-block;
padding: 2px;
font-size: .8em;
cursor: pointer;
}
.button:active {
transform: translateY(2px);
}
</style>

<script>
$(document).ready(function(){
$('#button8').click(function(){
$('#conference8').toggle('slow');
});
});
</script>
 </head>
<button id="button8">Abstract</button>
<div id="conference8">blah blah blah</div>

Answer 3

我明白了！谢谢大家（特别是@DinoMyte将我介绍给jsfiddle.net）。

问题不在于代码，而在于它的位置。我的CV包含在一个单独的.php文件中并导入，但我将代码放在样式表中，而不是放在.php文件中。当我把它移到cv.php时，它合作得很好。

按钮点击时Jquery切换div - 不切换

3 个答案:

工作示例：