Question

我有点像业余爱好者，所以我不知道如何实现这个目标。我会有一些按钮需要切换加号或减号：

Jquery的：

$(document).ready(function () {
$('.expandable').click(function () {
    $('.expandable').not(this).nextAll('tr').hide();
    $(this).nextAll('tr').toggle(350);

});
$('.expandable').nextAll('tr').each(function () {
    if (!($(this).is('.expandable'))) $(this).hide();
});
});

如何使用我已有的代码实现这一目标？

我想拥有与以下示例相同的功能：

http://jsfiddle.net/v9Evw/1/

任何帮助将不胜感激，谢谢你。

Answer 1

将以下代码添加到事件处理程序：

    $(this).find('[id^=myButton]').val(function(i,v) { 
        return v.trim() == '+' ? '-' : '+';
    });
    $('.expandable').not(this).find('input[type="button"]').val("+");

DEMO

Answer 2

工作小提琴：

http://jsfiddle.net/0eq456w9/10/

$('.expandable').click(function () {
    $('.expandable').not(this).nextAll('tr').hide();
    $('.expandable').not(this).find('input[type="button"]').val("+");
    $(this).nextAll('tr').toggle(350);
    if( $(this).find('input[type="button"]').val() == "+")
    {
        $(this).find('input[type="button"]').val("-");
    }
    else
    {
        $(this).find('input[type="button"]').val("+");
    }

});

Answer 3

您可以将跨度放在h3中或在单击事件目标中添加跨度。 http://jsfiddle.net/v9Evw/238/

<ul id="toggle-view">
    <li>
        <h3>Title 1<span>+</span></h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
    <li>
        <h3>Title 2<span>+</span></h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
    <li>
        <h3>Title 3<span>+</span></h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
</ul>

Answer 4

尝试交换你的js

$('li h3, li span', parent).click(function()

的

$('li h3', parent).click(function()

然后你可以在跨度中放置不同的图像，尝试使用bootstrap，他们有一些非常好的glpyhicons bs components

看看它是否为你的图像使用bootstrap。 Demo

Jquery加号和减号按钮切换

4 个答案: