Question

我无法从https://css-tricks.com/snippets/jquery/toggle-text/复制以下代码。

你能解释'：visible'的目的吗？感谢。

这是小提琴，代码复制在下面。

HTML：

<button id="more-less-options-button">more options</button>

JS

    $("#more-less-options-button").click(function() {
     var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle();
});

Answer 1

我创建了一个标识为span的{{1}}，现在可以使用了。如果可见，则更改文本并隐藏extra-options

，Jquery会检查标识为extra-options的内容是否可见

extra-options

$("#more-less-options-button").click(function() {
  
    var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
     $("#more-less-options-button").text(txt);
     $("#extra-options").slideToggle();
});

Answer 2

HTML中没有#extra-options。

Here's a fork of your jsfiddle.

可见检查div是否打开，文本也相应更改。

Answer 3

:visible在标识为extra-options的html页面中查找该元素，但您没有。{/ p>

我认为您正在寻找：http://jsfiddle.net/g6r0c8j5/1/

使用css-tricks.com中的jQuery切换文本

3 个答案: