Question

我希望在点击按钮时显示有＆＃34;隐藏＆＃34;类的LI。

＆＃13;

$(".show-more a").on("click", function() {
    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $('.hidden').css('visible', 'visible');
        $('.hidden').css('display', 'block');
    } else {
        linkText = "Show more";
        $('.hidden').css('visible', 'hidden');
        $('.hidden').css('display', 'none');
    };

    $this.text(linkText);
});

＆＃13;

.hidden {
display: none;
visibility: hidden;
}

＆＃13;

<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li class="hidden">Ipsum</li>
</ul>
<div class="show-more">
  <a href="#">Show more</a>
</div>

＆＃13;

我认为我的Javascript绝对错误，我是初学者。帮我感谢

Answer 1

您正在执行严格的比较===，因此字母大小写非常重要。

if(linkText === "Show more"){

删除隐藏这些元素的类怎么样？

$(".show-more a").on("click", function() {
    if(linkText === "Show more"){
        linkText = "Show less";
        $('li.hidden').removeClass('hidden')
    } else {
        linkText = "Show more";
        $('li.hidden').addClass('hidden')
    };

    $this.text(linkText);
});

js使用一些额外的重构： https://jsfiddle.net/rt0cs8jh/

Answer 2

默认情况下，您可以为要隐藏的每个元素指定一个hidden类。然后删除此类或只需在按钮单击时滑动它。

＆＃13;

var active = false;
$(".show-more a").on("click", function() {
  $('li.hidden').slideToggle();
  $(this).text(active ? 'Show more' : 'Show less')
  active = !active;
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li class='hidden'>Lorem</li>
  <li class='hidden'>Lorem</li>
  <li class='hidden'>Lorem</li>
  <li class="hidden">Ipsum</li>
</ul>
<div class="show-more">
  <a href="#">Show more</a>
</div>

＆＃13;

Answer 3

这是我怎么写的

$(".show-more a").on("click", function() {
    var currentText = $(this).text();
    if(currentText === "Show More"){
        $('.hidden').show();
        $(this).text("Show Less");
    } else {
        $('.hidden').hide();
        $(this).text("Show More");
    };
});

Answer 4

你只需点击处理程序，找到所有具有隐藏类的ul li元素，然后将其删除。下面的代码应该做你的蚂蚁。

$('.show-more a').on('click', function(){
  $('ul li.hidden').removeClass('hidden');
});

Answer 5

使用:gt(2)之类的选择器可以使您的代码更具扩展性。此选择器将选择除第一个2以外的所有项目。此外，检查.is(":visible")是一种更安全的方式来查看将文本设置为的内容。

此外，使用.toggle()可能会有点突然，如果您想使用.slideUp()和.slideDown()，则可以将代码更改为.slideToggle()。

＆＃13;

$("li:gt(2)").hide();

$(".show-more a").on("click", function() {
    $("li:gt(2)").toggle();
    if ($("li:gt(2)").is(":visible")) {
      $(this).html("Show less");
    } else {
      $(this).html("Show more");    
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
  <li>Ipsum</li>
</ul>
<div class="show-more">
  <a href="#">Show more</a>
</div>

＆＃13;

Answer 6

我会重构这个以添加父元素，然后通过父类切换这些东西的状态并更改CSS中的所有显示级别内容。

var $parent = $('.parent'),
    $links = $('.show-more a');

$links.on("click", function() {
  $parent.toggleClass('more');
});

.parent .hidden, .more li {
  display: none;
}
.more .hidden {
  display: list-item;
}
a:after {
  content: 'Less';
}
.more a:after {
  content: 'More';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li class="hidden">Ipsum</li>
  </ul>
  <div class="show-more">
    <a href="#">Show </a>
  </div>
</div>

Answer 7

您的第一个也是最大的问题是，您的功能基于现有数据，因此无法执行（您的功能不知道linkText是什么或者linkText值是什么。

其次，您不必更改＆＃34;隐藏＆＃34;的css属性。 class，你可以从元素中切换它。

这样可以解决问题：

enter code hereUse cake php book to read further.

显示更多按钮

7 个答案: