JavaScript单击打开列表

时间：2018-07-20 08:51:03

标签： javascript jquery html

我下面的代码包含显示更多按钮的水果列表。我当前要完成的工作是制作一个带有onclick函数的按钮，当我单击它时会打开列表。

我可以使用当前代码来实现，但是问题是当我再次单击该按钮时，我不希望我的列表关闭，我只希望它保持打开状态，即使我再次单击它也是如此。有没有简单的方法可以解决此问题，非常感谢您的帮助。

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'];

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 = 100;
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 data-target='#openly' 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;
    });
  }
});

function opening(){

  var openList = $('[data-target="#openly"]')[0];
  openList.click();
  
}
.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);
  background-color: #f2f2f2;
  
}

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

}

.container {
  width: 100%;
}

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

.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>
<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>
 


   <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
   <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</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>
        <button onclick="opening();" type="button" >Open</button>

      </div>

      <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h2 class="modal-title center">Your modal</h2>
                    </div>
                    <div class="modal-body">
                        <div class="central">
                            <h3 class="bold-text "> hello
                            </h3>
                        </div>
                        <div class="center">
                            <svg width="800" height="400"></svg>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>
</html>

1 个答案:

答案 0 :(得分：1)

因此，只需在您的opening()函数中添加一个条件，说明列表是否已关闭（这意味着链接显示"Show More"），请单击按钮，例如：

function opening() {
    var openList = $('[data-target="#openly"]');

    if (openList.text() === "Show More") {
       openList.click();
    }
}

这样，您可以控制click事件的调用

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'];

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(e) {
    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 $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 data-target='#openly' 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;
    });
  }
});

function opening() {

  var openList = $('[data-target="#openly"]');

  if (openList.text() === "Show More") {
    openList.click();
  }

}
.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);
  background-color: #f2f2f2;
}

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

.container {
  width: 100%;
}

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

.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>
<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>



  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</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>
    <button onclick="opening();" type="button">Open</button>

  </div>

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="modal-title center">Your modal</h2>
        </div>
        <div class="modal-body">
          <div class="central">
            <h3 class="bold-text "> hello
            </h3>
          </div>
          <div class="center">
            <svg width="800" height="400"></svg>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  </div>



</body>

</html>

相关问题
最新问题