jquery - 鼠标单击时启用/禁用的自定义滚动条

Question

我有一张电影表。为了使每一行保持相当短的长度，同时包含概要和特殊功能列表，我创建了一个高度为 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 的滚动条会粘在周围，而默认的滚动条会在其后面弹出，看起来很丑而且占用空间。

有什么办法可以实现这个目标吗？

预计到达时间:Here's一个 JSFiddle 链接到我没有 NiceScroll 时的链接。不知道如何获取 NiceScroll 代码，但基本上当我尝试使用它时，滚动条不会消失，并且内容仍然可滚动。

Answer 1

要删除 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>

演示:http://jsfiddle.net/kishoresahas/b9gy551w/1/