显示更多/更少按钮以显示div列表

时间：2018-08-01 09:23:33

标签： javascript jquery html css

我下面的代码由2个div列表组成，我目前正在尝试做的是为该列表创建一个显示更多/更少按钮，但是问题是因为我的列表是可点击的，因此很难为它找到一个特定的解决方案。我试图在网上找到许多解决方案，但没有一个起作用。

下面的小提琴是我尝试过的事情，但是它是否太容易出错了？当我将值从Random Fruits移到Total fruits并将其全部恢复到Random Fruits时，它将无法显示完整列表。任何帮助/建议将不胜感激。

https://jsfiddle.net/8g4wyLsc/ 

var redpill = {};
var greenpill = {};
var randompill = {};


var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key2 = "Green Fruits";
greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

var key3 = "Random Fruits";
randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

function redraw() {
  var combineString = '';
  $.each(redpill[key], function(index) {
    combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  $.each(greenpill[key2], function(index) {
    combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
  });
  $('.combineclass').html(combineString);

  var randomString = '';
  $.each(randompill[key3], function(index) {
    randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
  });
  $('.randomclass').html(randomString);
}



function listener() {
  $(document).ready(function() {
    $(document).on("click", "#suggestid div", function() {
      data = this.innerHTML;
      $(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
      var element = $(this).detach();
      $('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');


    });
  });

  $('body').on('click', 'div.new-green-fruit', function() {
    data2 = this.innerHTML;
    $(this).detach();
    var element2 = $(this).detach();
    $('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');

  });
}
redraw();
listener();
.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.randompill:after {
  content: "\002B";
  float: left;
  width: 16px;
}

.new-green-fruit:after {
  content: "\292B";
  float: left;
  width: 16px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.greenpill {
  background-color: SpringGreen;
  cursor: default;
}

.randompill {
  background-color: LightBlue;
  cursor: pointer;
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.top {
  margin-bottom: 20px
}

h3 {
  font-weight: normal;
}

.panel {
  display: table;
  height: 100%;
  width: 85%;
  background-color: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.new-green-fruit {
  background-color: LightBlue;
  cursor: pointer;
}

.top {
  margin-bottom: 30px;
}

#leftpanel {
  float: left;
  width: calc(50% - 5px);
}

#rightpanel {
  float: right;
  width: calc(50% - 5px);
}

.container {
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <style>

  </style>

</head>

<body>

  <div class="container">
    <div id=leftpanel>
      <h3 class="class center">Total Fruits</h3>
      <div id="currentid" class="combineclass wrappingflexbox top"></div>


    </div>

    <div id="rightpanel">
      <h3 class="class center">Random Fruits</h3>
      <div id="suggestid" class="suggestid randomclass wrappingflexbox top"></div>

    </div>
  </div>


  <script>
  </script>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

这里的问题是，您必须检查#leftpanel和#rightpanel的高度并将最高变量设置为defHeight。

类似的东西：

defHeight = ($('#leftpanel').height() >= $('#rightpanel').height()) ? $('#leftpanel').height() : $('#rightpanel').height()


 var redpill = {};
    var greenpill = {};
    var randompill = {};


    var key = "Red Fruits";
    redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

    var key2 = "Green Fruits";
    greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

    var key3 = "Random Fruits";
    randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew'];

    function redraw() {
      var combineString = '';
      $.each(redpill[key], function(index) {
        combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>');
      });
      $('.combineclass').html(combineString);

      $.each(greenpill[key2], function(index) {
        combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>');
      });
      $('.combineclass').html(combineString);

      var randomString = '';
      $.each(randompill[key3], function(index) {
        randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>');
      });
      $('.randomclass').html(randomString);
    }

    function adjustHeight(){
 
       /* CONTROL HIGHTEST DIV: RIGHT OR LEFT */
       defHeight = ($('#leftpanel').height() >= $('#rightpanel').height()) ? $('#leftpanel').height() : $('#rightpanel').height()
        if($wrap.height() != slideHeight ){
          $wrap.animate({
            height: defHeight
          }, "normal");  
        }

    }

    function listener() {
      $(document).ready(function() {
        $(document).on("click", "#suggestid div", function() {
          data = this.innerHTML;
          $(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length);
          var element = $(this).detach();
          $('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>');
          
          adjustHeight()
          
        });
      });

      $('body').on('click', 'div.new-green-fruit', function() {
        data2 = this.innerHTML;
        $(this).detach();
        var element2 = $(this).detach();
        $('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>');
        
        adjustHeight()
        
      });
    }
    redraw();
    listener();

    var slideHeight = 100;
    var defHeight
    var curHeight
    var $wrap
    $(".container").each(function() {
      var $this = $(this);
      $wrap = $this.children(".wrapper");
      defHeight = $wrap.height();

      if (defHeight >= slideHeight) {
        var $readMore = $this.find(".read-more");
        $wrap.css("height", slideHeight + "px");
        $readMore.append("<a href='#'>Show More</a>");
        $readMore.children("a").bind("click", function(event) {
          curHeight = $wrap.height();
          if (curHeight == slideHeight) {
            $wrap.animate({
              height: defHeight
            }, "normal");
            $(this).text("Show Less");
            $wrap.children(".gradient").fadeOut();
          } else {
            $wrap.animate({
              height: slideHeight
            }, "normal");
            $(this).text("Show More");
            $wrap.children(".gradient").fadeIn();
          }
          return false;
        });
      }
    });

    /* this is resize stuff */
      var resize;
      $(window).resize(function() {
        clearTimeout(resize);
        resize = setTimeout(resizeStuff, 200);
      });
      
      function resizeStuff() {
        adjustHeight()
      }
      /* End of resize stuff */
.pilldiv {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  color: Black;
  margin: 2px;
}

.randompill:after {
  content: "\002B";
  float: left;
  width: 16px;
}

.new-green-fruit:after {
  content: "\292B";
  float: left;
  width: 16px;
}

.redpill {
  background-color: Pink;
  cursor: default;
}

.greenpill {
  background-color: SpringGreen;
  cursor: default;
}

.randompill {
  background-color: LightBlue;
  cursor: pointer;
}

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center;
}

.wrappingflexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.top {
  margin-bottom: 20px
}

h3 {
  font-weight: normal;
}

.panel {
  display: table;
  height: 100%;
  width: 85%;
  background-color: white;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

.new-green-fruit {
  background-color: LightBlue;
  cursor: pointer;
}

.top {
  margin-bottom: 30px;
}

#leftpanel {
  float: left;
  width: calc(50% - 5px);
  background-color: #f2f2f2;

}

#rightpanel {
  float: right;
  width: calc(50% - 5px);
  background-color: #f2f2f2;
  "

}

.container {
  width: 100%;
}

.wrapper {
  position: relative;
  overflow: hidden;
  padding: 10px;
}

.gradient {
  width: 100%;
  height: 35px;
  background: url(http://spoonfedproject.com/wp-content/uploads/demo/jquer-slide/images/bg-gradient.png) repeat-x;
  position: absolute;
  bottom: 0;
  left: 0;
}

.read-more {
  background: #fff;
  color: #333;
  padding: 5px;
}

.read-more a {
  padding-right: 22px;
  font-weight: 700;
  text-decoration: none;
}

.read-more a:hover {
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="wrapper">
      <div id=leftpanel>
        <h3 class="class center">Total Fruits</h3>
        <div id="currentid" class="combineclass wrappingflexbox top"></div>

        <div class="gradient">
        </div>
      </div>

      <div id="rightpanel">
        <h3 class="class center">Random Fruits</h3>
        <div id="suggestid" class="randomclass wrappingflexbox top"></div>

        <div class="gradient">
        </div>
      </div>
    </div>
    <div class="read-more">
    </div>
  </div>

注意：正如我在评论中所说，您的代码没有响应，因此我添加了“调整大小”来控制窗口的更改。现在看来一切正常。

希望它对您有帮助。

干杯：）

相关问题
最新问题