Question

我有两个列表和一个显示更多/显示更少按钮。单击按钮后，我的第二个列表将添加到我的第一个列表中。然而，第一个列表的元素已经在第二个列表中，并且以不同的方式重新排列。

我想我可以隐藏第一个列表的元素而只显示第二个列表。问题是，当我点击 show less 按钮时，我的第一个列表消失了。

我需要 jQuery 方面的帮助，因此当我单击 show less 并隐藏第二个列表时，我仍然可以显示第一个列表。我只使用 CSS 实现了切换，没有使用 Javascript。

任何建议将不胜感激。谢谢

$('#showmore').click(function() {
  $('#mylist li').hide();
});

ul.check {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

ul.check li {
  text-align: left;
  word-wrap: break-word;
  width: 243px;
  background-image: url('../images/check.png');
  background-repeat: no-repeat;
  background-position: 19px 6px;
  padding-left: 40px;
  font-size: 12px;
  font-family: LatoWebBold;
  line-height: 25px;
}

.readmore {
  position: relative;
  border-top: 0;
  margin-bottom: 50px;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.readmore label {
  display: block;
  width: 100%;
  height: 18px;
  font-size: 15px;
  font-family: LatoWebBlack;
  color: #282828;
  cursor: pointer;
  position: absolute;
  margin-top: 10px;
  transition: top .45s cubic-bezier(.44, .99, .48, 1);
}

.readmore label:before,
.readmore label:after {
  text-align: center;
}

.readmore label:before {
  content: 'Show More';
  margin-right: 20px;
  left: 10px;
}

.readmore label:after {
  content: url('../images/arrow-down.png');
  -webkit-animation: sudo .85s linear infinite alternate;
  animation: sudo .85s linear infinite alternate;
}

input[type="checkbox"]~ul,
input[type="checkbox"]~a {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  transition: max-height .80s cubic-bezier(.44, .99, .48, 1);
}

[type="checkbox"]:checked~ul,
[type="checkbox"]:checked~a {
  max-height: 800px;
}

.readmore [type="checkbox"]:checked+label {
  top: 100%;
}

.readmore [type="checkbox"]:checked+label:before {
  content: 'Show less';
  padding-bottom: 100px;
}

.readmore [type="checkbox"]:checked+label:after {
  content: url('../images/arrow-up.png');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="check" id="mylist">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<div class="readmore" id="showmore">
  <input type="checkbox" id="check_id">
  <label for="check_id"></label>
  <ul class="check" id="extra">
    <li>item 4</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 1</li>
    <li>item 5</li>
  </ul>
</div>

显示更多/显示更少两个列表

0 个答案: