Jquery在按钮单击时切换div - 不切换答案

【问题标题】：Jquery toggle div on button click - not togglingJquery在按钮单击时切换div - 不切换
【发布时间】：2016-05-05 20:17:20
【问题描述】：

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

【问题讨论】：

您需要在
代码在其他地方也可以工作，这让我很放心，但这只是让我更加困惑。我在样式标签中添加了
按照这里的代码。这正是您需要做的：jsfiddle.net/fvgLd018/1

标签： javascript jquery css button toggle

【解决方案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>

【讨论】：

你能澄清一下吗？我尝试将函数周围的

【解决方案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>

【讨论】：

【解决方案3】：

我明白了！谢谢大家（尤其是@DinoMyte 向我介绍了 jsfiddle.net）。

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

【讨论】：