Question

如果列出了带有+符号的项目列表以显示更多内容，我可以在点击时将列表元素与+切换为-，并在点击时返回+再次？

<ul class="practice-areas-list">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>



$('ul.practice-areas-list').each(function() {
  $('li:gt(4)', this).hide();
});
$('ul.practice-areas-list').each(function() {
  if ($(this).find('li').length > 4) {
    $(this).append('<li>+</li>').find('li:last').click(function() {
      $(this).siblings(':gt(4)').toggle();
    });
  }
});

JSFIDDLE：LINK

Answer 1

您可以添加一行来执行此操作：

> unlist(list_two[names(list_one)])!=unlist(list_one)
    a     b     c 
FALSE FALSE  TRUE

＆＃13;

  $(this).html( $(this).html() == '+' ? '-':'+' )

＆＃13;

$('ul.practice-areas-list').each(function() {
  $('li:gt(4)', this).hide();
  if ($(this).find('li').length > 4) {
    $(this).append('<li>+</li>').find('li:last').click(function() {
      $(this).siblings(':gt(4)').toggle();
      $(this).html( $(this).html() == '+' ? '-':'+' )
    });
  }
});

＆＃13;

li{
  list-style-type:none;
}

＆＃13;

该行的内部<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="practice-areas-list"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>表示如果末尾附加的该列表项的内容是加号，请将其更改为减号，否则将其更改为加号。然后它获取该内容并将其指定为最后一个列表项的html。请注意，我还合并了两个$(this).html() == '+' ? '-':'+'循环。

Answer 2

我更改了一些代码以提高可读性，但我认为这是最好的。所以，基本上，检查.is(":visible")，如果它是真的设置为 - ，如果不是那么+。

＆＃13;

$hideArea = $('ul.practice-areas-list li:not(.expand):gt(4)').hide();

$expand = $(".expand").click(function() {
  $hideArea.toggle();
  if ($hideArea.is(":visible")) {
    $expand.html("-");
  } else {
    $expand.html("+");
  }
});

＆＃13;

li{
  list-style-type:none;
}
.expand {
  cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="practice-areas-list">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li class="expand">+</li>
</ul>

＆＃13;

如何在点击时切换列表元素的值

2 个答案: