好的 - 我不是 jQuery 的大用户 - 所以这可能是一个相当容易解决的问题，但由于我不确定是什么导致了这个困难，所以我很难找到任何相关信息.
问题:我在一个页面上有一系列的 div，一个在另一个之上。它们中的每一个都执行相同的功能，即单击时展开，再次单击时收缩。最初，我曾计划对所有 3 个使用一个 jquery 脚本，但我无法弄清楚如何在没有同时打开所有 3 个 div 的情况下应用它。我继续使用 3 个相同的脚本，每个脚本都引用一个特定的 div，这也使得将它们缩放到正确的高度变得简单。但是，使用我当前的代码，一旦我单击 3 个 div 中的任何一个，需要单击 2 次而不是单击 1 次才能使下一个执行其转换。如何解决这个问题？
代码:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
isLarge = false;
$(document).ready(function(){
$(".dropdown_1").click(function(){
$(".dropdown_1").animate({height:(isLarge ? '33px' : '100px')});
isLarge = !isLarge;
});
});
isLarge = false;
$(document).ready(function(){
$(".dropdown_2").click(function(){
$(".dropdown_2").animate({height:(isLarge ? '33px' : '100px')});
isLarge = !isLarge;
});
});
isLarge = false;
$(document).ready(function(){
$(".dropdown_3").click(function(){
$(".dropdown_3").animate({height:(isLarge ? '33px' : '100px')});
isLarge = !isLarge;
});
});
</script>
<style>
h4 {
width: 745px;
height: 26px;
display: inline-block;
border-bottom: 4px solid #740000;
padding-bottom: 3px;
padding-left: 5px;
font-size: 24px;
-webkit-text-shadow: 0px 1px 5px black;
-moz-text-shadow: 0px 1px 5px black;
text-shadow: 0px 1px 5px black;
margin: 0 0 5px 0;
}
h5 {
margin: 10px 0 10px 8px;
font-size: 18px;
-webkit-text-shadow: 0px 1px 5px black;
-moz-text-shadow: 0px 1px 5px black;
text-shadow: 0px 1px 5px black
}
div.dropdown_1 {
-moz-transition: height 2s;
-ms-transition: height 2s;
-o-transition: height 2s;
-webkit-transition: height 2s;
background: #c06d00;
height: 33px;
width: 750px;
position: relative;
overflow: hidden;
margin: 0 0 35px 25px;
-webkit-box-shadow: 0px 1px 10px 1px black;
-moz-box-shadow: 0px 1px 10px 1px black;
box-shadow: 0px 1px 10px 1px black;
background-image: url(images/dropdown_arrow.png);
background-position: right top;
background-repeat: no-repeat;
}
div.dropdown_2 {
-moz-transition: height 2s;
-ms-transition: height 2s;
-o-transition: height 2s;
-webkit-transition: height 2s;
background: #c06d00;
height: 33px;
width: 750px;
position: relative;
overflow: hidden;
margin: 0 0 35px 25px;
-webkit-box-shadow: 0px 1px 10px 1px black;
-moz-box-shadow: 0px 1px 10px 1px black;
box-shadow: 0px 1px 10px 1px black;
background-image: url(images/dropdown_arrow.png);
background-position: right top;
background-repeat: no-repeat;
}
div.dropdown_3 {
-moz-transition: height 2s;
-ms-transition: height 2s;
-o-transition: height 2s;
-webkit-transition: height 2s;
background: #c06d00;
height: 33px;
width: 750px;
position: relative;
overflow: hidden;
margin: 0 0 35px 25px;
-webkit-box-shadow: 0px 1px 10px 1px black;
-moz-box-shadow: 0px 1px 10px 1px black;
box-shadow: 0px 1px 10px 1px black;
background-image: url(images/dropdown_arrow.png);
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="content">
<a href="index.html">
<div id="header_img_bwf">
</div>
</a>
<div id="body">
<h3>Programs</h3>
<div class="dropdown_1">
<h4>title</h4>
<h5>title</h5>
<p>text</p>
<p>text</p>
</div>
<div class="dropdown_2">
<h4>title</h4>
<h5>title</h5>
<p>text</p>
<p>text</p>
</div>
<div class="dropdown_3">
<h4>title</h4>
<h5>title</h5>
<p>text</p>
<p>text</p>
</div>
</div>
</div>
</body>
</html>
如果有人能指出我在这方面的正确方向，我将不胜感激，在此先感谢!
最佳答案
将 dropdown_1、dropdown_2、dropdown_3 重命名为 dropdown，然后使用以下代码。
$(document).ready(function () {
$(".dropdown").click(function () {
var height = '33px';
if ($(this).hasClass("open")) {
height = '33px';
$(this).removeClass("open");
} else {
height = '100px';
$(this).addClass("open")
}
$(this).animate({
height: height
});
});
});
关于jquery - 通过 jquery 扩展 div 需要额外的点击才能激活，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20513673/