我创建了一个poptext / toggle菜单。所有数据都是从数据库表“jobshiring”中检索出来的，其中有2列是“作业”和“作业”。 '描述'。页面上显示的第一个数据工作正常。示例：Job1（单击时，将显示说明）。但除了Job1之外的以下作业是不可点击的，简而言之，切换功能不起作用。我尝试修复脚本，但我没有javascript的知识。我需要修理哪个部分？ ：（
CSS:
#toggle {
position: relative;
bottom: 0px;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
}
#box {
margin: 0;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 10px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
width: 100%;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 100%;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: brown;
}
HTML / PHP / SCRIPT：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
window.addEventListener('load', function() {
$('#poptext').click(function() {
$('#poptext').toggleClass('highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
})
</script>
<body>
<?php
$result = mysql_query("SELECT * FROM jobshiring");
while($row = mysql_fetch_array($result)){
$job = $row['job'];
$description = $row['description'];
?>
<div id="toggle">
<div id="poptext"><?php echo $job; ?></div>
<div id="box">
<p> <?php echo $description ?> </p>
</div>
</div>
<?php } ?>
PAGE SOURCE:
<div id="toggle">
<div id="poptext">Web Developer</div>
<div id="box">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique. </p>
</div>
</div>
<div id="toggle">
<div id="poptext">Systems Analyst</div>
<div id="box">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique. </p>
</div>
</div>
<div id="toggle">
<div id="poptext">Business Analysts</div>
<div id="box">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et tempus arcu, ac ultrices enim. Etiam dapibus ante at feugiat condimentum. Integer ut varius turpis. Quisque lacus tortor, consequat eu ante in, pharetra lobortis ipsum. Mauris quis lectus maximus, sollicitudin odio non, posuere nisl. Nunc hendrerit lectus sed mauris aliquet, ut porttitor odio euismod. Praesent ut felis facilisis odio laoreet vulputate at eget sem. Nullam ut purus at justo pulvinar molestie. Suspendisse et massa sed ex sodales efficitur. Nam rutrum sem justo, non facilisis turpis maximus at. Sed tincidunt nibh vel dolor imperdiet, nec sollicitudin dolor auctor. Suspendisse pharetra sem tellus, et rutrum massa scelerisque non. Pellentesque luctus quam libero. Maecenas suscipit sem eu urna ornare tristique. </p>
</div>
</div>
<div id="toggle">
<div id="poptext">asdasf</div>
<div id="box">
<p> asfsaf </p>
</div>
</div>
<div id="toggle">
<div id="poptext">asda</div>
<div id="box">
<p> sasdsa asdas </p>
</div>
</div>
答案 0 :(得分：1)
没有必要拥有这么多不同版本的jQuery，只需拥有最新版本的
元素的ID必须是唯一的，如果要使用公共属性对多个元素进行分组，请使用公共类而不是ID。 ID选择器将仅获取具有给定ID的第一个元素，这就是为什么在您的情况下只有第一个元素正在工作。
同样在事件处理程序中，您需要处理与单击元素相关的元素，因此您可以在处理程序中使用this来引用单击的poptext元素并切换其类，然后使用相同的引用来查找下面给出的box元素
所以
jQuery(function($) {
$('.poptext').click(function() {
$(this).toggleClass('highlight');
$(this).next('.box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
}).toggle {
position: relative;
bottom: 0px;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
}
.box {
margin: 0;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 10px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
width: 100%;
}
.box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
.poptext {
width: 100%;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
.poptext.highlight {
background: brown;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
<div class="poptext">text 1</div>
<div class="box">
<p>box 1</p>
</div>
</div>
<div class="toggle">
<div class="poptext">text 2</div>
<div class="box">
<p>box 2</p>
</div>
</div>
<div class="toggle">
<div class="poptext">text 3</div>
<div class="box">
<p>box 3</p>
</div>
</div>