Question

我下面的代码由2个列表Total Fruits and Random Fruits和一个Show more/less button组成，当我删除BootStrap links时，代码工作得很好，但是我不确定添加之后为什么我的代码完全不起作用。

我是否在代码中犯了错误或什么错误，因为我真的不知道为什么它不起作用。任何帮助将不胜感激，谢谢！

var redpill = {};
var greenpill = {};
var randompill = {};


var key = "Red Fruits";
redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon','Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon','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'];

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(){
	defHeight = $('#leftpanel').height()
	$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 = 200;
  var defHeight
  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) {
        var 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;
      });
    }
  });

.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{
  display: table;
     max-height: 100%;
     width: 85%;
     background-color:white;
     margin-left: auto;
     margin-right: auto;
     margin-top:25px;    
}

.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;
}

<!DOCTYPE html>
<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>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="//#" />

</head>

<body>
  <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>



    </body>
</html>

Answer 1

更新您的.wrapper类以具有框大小

2032.766

您必须指定您的类，因为引导程序的css会添加此类，因此使用框大小定义类.wrapper会覆盖此通配符：

.wrapper {
    position:relative;
    overflow:hidden;
    padding:10px;    
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

工作示例：https://codepen.io/classicmatsuo/pen/dKQwLO

为什么添加引导程序后代码不起作用

1 个答案: