0

当您单击它时，我试图使锚点更改它的文本。但不是切换它只是变得不可见并且不起作用。

这是代码：

$('a#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle('200');

    $(this).toggle(function() {
        $(this).html('Hide All');
    }, function() {
        $(this).html('Show All');
    });
});

HTML：

<a id="button" href="#"></a>
<div id="ListingBox">

        <ul id="furniture">
            <li>Beds</li>
            <li>Chairs</li>
            <li>Tables</li>
            <li>Desks</li>
            <li>Shelves</li>
            <li>Cabinet</li>
            <li>Miscellaneous</li>
        </ul>

        <ul id="games">
            <li>PC</li>
            <li>Mac</li>
            <li>XBOX 360</li>
            <li>Playstation 3</li>
            <li>Nintendo Wii</li>
            <li>PS Vita</li>
            <li>Playstation 2</li>
            <li>Playstation</li>
            <li>Super Nintendo</li>
            <li>Nintendo DS</li>
            <li>Miscellaneous</li>
        </ul>
</div>

我已经用.htmland试过了.text。

4

4 回答 4

4

toggle不推荐使用 event 方法，可以使用text方法回调函数，注意 200msslideToggle执行太快。

$('#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle(600);   
    $(this).text(function(i, currentText){
       return currentText === 'Show All' ? 'Hide All' : 'Show All';
    })
});
于 2013-01-29T14:03:19.783 回答
1

.toggle() event自 1.8 起已弃用

HTML：

<a href="#" id="button" class="hide_all">Hide ALL</a>

<div id="find">
  <p>Here is some content</p>
  <p>Here is some content</p>
</div>

JS：

var findListingBoxList = $('#find');

var labels = {
  hide: 'Hide ALL',
  show: 'Show ALL'
};

$('#button').click(function(e){

  e.preventDefault();
  if($(this).text() == labels.show) {
    $(this).text(labels.hide);
    findListingBoxList.slideDown();
  } else {
    $(this).text(labels.show);
    findListingBoxList.slideUp();
  }
})

使用 slideDown/slideUp 允许链接工作，无论其起始状态如何（您可以使用 Show ALL 或 Hide ALL 状态加载页面。）

看看这个演示：http ://codepen.io/ByScripts/pen/mbekK

于 2013-01-29T13:58:23.560 回答
1

首先，请记住，您的切换事件已在最新的 jquery 中删除，并且从 v 1.8 开始已弃用。

此外，在您的代码中，您仅在第一次单击按钮后才将切换事件绑定到您的按钮。而不是你应该做这样的事情：

$('a#button').click(function(e) {
    e.preventDefault();
    findListingBoxList.slideToggle('200');

}).toggle(function() {
        $(this).html('Hide All');
    }, function() {
        $(this).html('Show All');
    });

最后一件事，它应该在findListingBoxList.

于 2013-01-29T14:03:58.040 回答
0 
findListingBoxList.slideToggle(200);

你必须给一个整数参数而不是一个字符串，即'200'

于 2013-01-29T14:01:36.763 回答