我有一张电影桌。为了使每一行合理地缩短，同时包括一个概要和特殊功能列表，我创建了一个高度为20px的“.synopsisSmall”div。里面是“.synopsisFull”div或“.Extras”div。单击“.synopsisSmall”会扩展到其子项的大小。 “.Extras”的最大高度为200px，因为有些列表失控了。我将其溢出设置为滚动，但随后它变得可滚动甚至折叠，所以我将其溢出设置为隐藏并更改了代码：
$(document).ready(function(){
//Tag all rows as collapsed
$(".synopsisSmall").attr("isclicked", "notclicked");
})
$(document).ready(function(){
$(".synopsisSmall").click(function(){
//Determine which row has been clicked on, and how tall its full contents is in each column
var clickedID = $(this).attr("id");
var synopsisHeight = $("#" + clickedID + ".synopsisFull").height();
var featuresHeight = $("#" + clickedID + ".Extras").height();
//Check if row is collapsed or expanded
var currentHeight = $(this).attr("isclicked");
//If collapsed, animate the row height to either the height of the synopsis or the height of the special features, whichever is greater
if (currentHeight == "notclicked") {
if (synopsisHeight > featuresHeight) {
$("#" + clickedID + ".synopsisSmall").animate({"height":(synopsisHeight + "px")}, 500); }
else {
$("#" + clickedID + ".synopsisSmall").animate({"height":(featuresHeight + "px")}, 500); }
//Make it scrollable
$("#" + clickedID + ".Extras").css({"overflow":"auto"});
//And tag it as expanded
$("#" + clickedID + ".synopsisSmall").attr("isclicked", "clicked");
//Collapse any expanded rows, and tag them as collapsed
$(".synopsisSmall").not("#" + clickedID).animate({"height": "20px"});
$(".synopsisSmall").not("#" + clickedID).attr("isclicked", "notclicked"); }
//Otherwise, if the clicked row is already expanded, simply collapse it and disable scrolling
else { $("#" + clickedID + ".synopsisSmall").animate({"height":"20px"});
$("#" + clickedID + ".Extras").css({"overflow":"hidden"});
//And then tag it as collapsed
$("#" + clickedID + ".synopsisSmall").attr("isclicked", "notclicked"); }
})
});
唯一的问题是滚动条看起来很丑陋，占用了大量的水平空间。所以我做了一些谷歌搜索，发现了一个名为NiceScroll的jQuery插件。在启用滚动的行下面添加了以下内容：
$("#" + clickedID + ".Extras").niceScroll();
但是现在，当折叠时，它仍然可以滚动。如果重新扩展，NiceScroll的滚动条会粘在一起，而默认的滚动条会弹出它，看起来很丑陋，占用空间。
有没有办法可以解决这个问题？
ETA：Here's一个JSFiddle链接，指向没有NiceScroll的内容。不知道如何在那里获得NiceScroll代码，但基本上当我尝试使用它时，滚动条不会消失，内容仍然可滚动。
答案 0 :(得分：0)
要删除nicescroll，请使用以下代码：
$("#" + clickedID + ".Extras").getNiceScroll().remove();
$(document).ready(function() {
$(".synopsisSmall").attr("isclicked", "notclicked");
})
$(document).ready(function() {
$(".synopsisSmall").click(function() {
var clickedID = $(this).attr("id");
var synopsisHeight = $("#" + clickedID + ".synopsisFull").height();
var featuresHeight = $("#" + clickedID + ".Extras").height();
var currentHeight = $(this).attr("isclicked");
if (currentHeight == "notclicked") {
if (synopsisHeight > featuresHeight) {
$("#" + clickedID + ".synopsisSmall").animate({
"height": (synopsisHeight + "px")
}, 500);
} else {
$("#" + clickedID + ".synopsisSmall").animate({
"height": (featuresHeight + "px")
}, 500);
}
$("#" + clickedID + ".Extras").css({
"overflow": "auto"
});
$("#" + clickedID + ".synopsisSmall").attr("isclicked", "clicked");
$(".Extras").not("#" + clickedID).css({
"overflow": "hidden"
});
$(".synopsisSmall").not("#" + clickedID).animate({
"height": "20px"
});
$(".synopsisSmall").not("#" + clickedID).attr("isclicked", "notclicked");
} else {
$("#" + clickedID + ".synopsisSmall").animate({
"height": "20px"
});
$("#" + clickedID + ".Extras").css({
"overflow": "hidden"
});
$("#" + clickedID + ".synopsisSmall").attr("isclicked", "notclicked");
}
setTimeout(function() {
$("#" + clickedID + ".Extras").getNiceScroll().remove();
$("#" + clickedID + ".Extras").niceScroll();
}, 500);
})
});.Extras {
vertical-align: central;
text-align: left;
margin: auto;
max-height: 200px;
overflow: hidden;
}
.Extras li {
line-height: 16px;
}
.Extras ul {
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
}
.synopsisSmall {
overflow: hidden;
cursor: pointer;
vertical-align: central;
height: 20px;
display: flex;
}
.synopsisFull {
vertical-align: central;
max-height: none;
display: block;
margin: auto;
}
table,
td,
th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
vertical-align: central;
border-collapse: collapse;
text-align: center;
padding: 8px;
padding-right: 12px;
padding-left: 12px;
text-wrap: normal;
word-wrap: normal;
}
table {
border: thin solid #FFF;
background-color: #666;
}
td,
th {
border: none;
max-width: 250px;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
<table>
<tr>
<th>Title</th>
<th>Synopsis</th>
<th>Year</th>
<th>Special Features</th>
</tr>
<tr>
<td>Batman Begins</td>
<td>
<div class="synopsisSmall" id="3">
<div class="synopsisFull" id="3">After training with his mentor, Batman begins his war on crime to free the crime-ridden Gotham City from corruption that the Scarecrow and the League of Shadows have cast upon it.</div>
</div>
<td>2005</td>
<td>
<div class="synopsisSmall" id="3">
<div class='Extras' id="3">
<ul>
<li><i>The Dark Knight</i> IMAX Prologue</li>
<li>In-Movie Experience</li>
<li>Additional Footage:
<ul>
<li>Reflections on Writing</li>
<li>Digital Batman</li>
<li>BATMAN BEGINS Stunts</li>
</ul>
</li>
<li>Behind The Story
<ul>
<li>Tankman Begins</li>
<li>The Journey Begins</li>
<li>Shaping Mind and Body</li>
<li>GOTHAM CITY Rises</li>
<li>Cape and Cowl</li>
<li>Batman - The Tumbler</li>
<li>Path to Discovery</li>
<li>Saving Gotham City</li>
<li>Genesis of the Bat</li>
<li>Stills Gallery</li>
<li>Confidential Files</li>
</div>
</div>
</tr>
<tr>
<td>The Bourne Supremacy</td>
<td>
<div class="synopsisSmall" id="7">
<div class="synopsisFull" id="7">When Jason Bourne is framed for a CIA operation gone awry, he is forced to resume his former life as a trained assassin to survive.</div>
</div>
</td>
<td>2004</td>
<td>
<div class="synopsisSmall" id="7">
<div class='Extras' id="7">
<ul>
<li>Deleted Scenes</li>
<li>Matching Identities: Casting</li>
<li>Keeping it Real</li>
<li>Blowing Things Up</li>
<li>On the Move With Jason Bourne</li>
<li>Bourne to be Wild: Fight Training</li>
<li>Crash Cam: Racing Through the Streets of Moscow</li>
<li>The Go-Mobile Revs Up the Action</li>
<li>Anatomy of a Scene: The Explosive Bridge Chase Scene</li>
<li>Scoring With John Powell</li>
<li>The Bourne Mastermind (Part 2)</li>
<li>The Bourne Diagnosis (Part 2)</li>
<li>Audio Commentary With Director Paul Greengrass</li>
</ul>
</div>
</div>
</td>
</tr>
</table>