jQuery - 点击切换文本

Question

我有一个菜单按钮，当点击它时会在下面滑出一个div。

我的菜单标题是“+打开菜单”

当菜单按钮被点击时，我的代码将标题更改为“+菜单”，表示菜单已经打开。

当用户关闭菜单时，我希望标题恢复为“-菜单”

这是定义类的HTML，本例中为test。

<span class="test">+ Open menu</span>

这是我的jQuery函数，我无法弄清如何恢复菜单状态。

$(document).ready(function () {
$(".widget_head_type").click(function () 
{
    $(".widget_body_type").slideToggle("slow");
    $(".test").text("- Close menu");
});

});

- BallSoHard

---

可能是 jQuery Toggle Text? 的重复问题。 - Hashem Qolami

Answer 1

$(".widget_head_type").click(function () {
    $(".widget_body_type").slideToggle("slow");
    ($(".test").text() === "+ Open menu") ? $(".test").text("- Close menu") : $(".test").text("+ Open menu");
});

- Bitter

---

现在已经很晚了 ;) 谢谢！ - BallSoHard

Answer 2

这里有一个基于http://api.jquery.com/toggle/的有趣内容。

HTML

<span class="test">+ Open menu</span>
<span class="test" style="display:none">- Close menu</span>

JS

$(document).ready(function () {
$(".widget_head_type").click(function () 
{
    $(".widget_body_type").slideToggle("slow");
    $(".test").toggle();
});

简单来说，它可以切换所有类为“test”的标签的显示或隐藏状态。

- user3257693

---

加一 :) 这是创新的。 - Amit Kumar

Answer 3

jQuery.fn.extend({
    toggleText: function (a, b){
        var that = this;
            if (that.text() != a && that.text() != b){
                that.text(a);
            }
            else
            if (that.text() == a){
                that.text(b);
            }
            else
            if (that.text() == b){
                that.text(a);
            }
        return this;
    }
});

使用方法如下：

$("#YourElementId").toggleText('After', 'Before');

- Diego Favero

---

虽然一行代码的解决方案是这样的：$.fn.extend({ toggleText: function(a, b){ return this.text(this.text() == b ? a : b); } });但实际上并不是一行。 用法与您的相同：$(".example").toggleText('Initial', 'Secondary'); - Danish

Answer 4

这里有可用的FIDDLE演示

我猜测了您的HTML，并列出了一些替代方案，但您可以考虑以下内容：

HTML：

<div class="some_parent_class">
    <div class="widget_head_type">
        <span class="test">+ Menu</span>
    </div>
    <div class="widget_body_type">
        Body
    </div>
</div>

JS：

jQuery(function ($) {
    $('.widget_head_type').each(function () {
        // closures
        var $toggle = $(this);
        var $parent = $toggle.closest('.some_parent_class');
        var $target = $parent.find('.widget_body_type');
        var $label = $toggle.find('.test');
        var bIsTweening = false;
        // OR var $target = $toggle.next('.widget_body_type');
        // event methods (closures)
        var fClickToggle = function () {
            if (!bIsTweening) {
                bIsTweening = true;
                $target.slideToggle('slow', fToggleCallback);
            }
        };
        var fToggleCallback = function () {
            bIsTweening = false;
            fSetLabel();
        };
        var fSetLabel = function () {
            var sLabel = $label.text().replace('+', '').replace('-', '');
            sLabel = ($target.is(':visible') ? '-' : '+') + sLabel;
            $label.html(sLabel);
        };
        // handle event
        $toggle.click(fClickToggle);
        $target.hide();
        fSetLabel();
    });
});

- Levi Beckman

Answer 5

我曾经遇到过同样的问题，这是我解决它的方法：使用你的代码示例。

$(".widget_head_type").click(function () {
    $(".widget_body_type").slideToggle("slow");
    ($(".test").text() == "+ Open menu") ? $(".test").text("- Close menu") : $(".test").text("+ Open menu");
});

在编程中，使用两个等号进行比较。

- Ossaija D