javascript - jQuery切换内部切换，单独选择

Question

我正在尝试实现jquery UI切换功能。

这是我到目前为止所拥有的：http: //jsfiddle.net/PauWy/470/

我试图做到这一点，以便当我单击 Item1 时，会出现“+”和“-”，我可以单击“+”或“-”来获得不同的结果。但是正如你所看到的，有两个问题：

1. 当我尝试单击它时，切换隐藏了 +/-。
2. 改变一个 +/- 改变所有其他的。

请高手指教如何解决这个问题，谢谢！

Answer 1

好的，那就是：

$('.to-do > span').click(function () {
    var ix = $(this).index();
    console.log(ix);
    $('.add', $(this).parents('div')).toggle(ix == 0);
    $('.reduce', $(this).parents('div')).toggle(ix == 1);
    return false;
});

JSFiddle

Answer 2

刚看到你的更新，会检查它

如果我达到了你的目标，你为什么不使用这样的东西：

$(".trigger").click(function (){
        $(".menu-item", this).toggle();
});
$(".menu-item").toggle();
$('.add').hide();
$('.reduce').hide();

$('.plus').click(function () {
    event.stopPropagation();
    $(this).closest(".menu-item").find('.add').toggle();
});

$('.minus').click(function (e) {
    event.stopPropagation();
    $(this).closest(".menu-item").find('.reduce').toggle();
});

和html：

<ul id="menu-items">
    <li id="item_1">
        <div class="trigger">Item1
            <div class="menu-item" >
                <p class="to-do">
                    <div class="plus"> + </div>
                    <div class="minus"> - </div>
                </p>
            <div class="add">Add</div>
            <div class="reduce">Subtract</div></div>
        </div>
    </li>
    <li id="item_2">
        <div class="trigger">Item2
            <div class="menu-item" >
                <p class="to-do">
                    <div class="plus"> + </div>
                    <div class="minus"> - </div>
                </p>
            <div class="add">Add</div>
            <div class="reduce">Subtract</div></div>
        </div>
    </li>
    <li id="item_3">
        <div class="trigger">Item3
            <div class="menu-item" >
                <div class="plus"> + </div>
                <div class="minus"> - </div>
                <div class="add">Add</div>
                <div class="reduce">Subtract</div>          
            </div>
        </div>
    </li>
</ul>

这个很棘手，我也更改了 html。只是为了解释基本：

此行防止来自父级的单击事件：

event.stopPropagation();

这一行查看“this”父级并找到“add”/“reduce”壁橱类：

$(this).closest(".menu-item").find('.add')

希望它有所帮助。祝你好运！

Answer 3

不确定，但可能你需要这个

$('#toggle > span').click(function () {
    var ix = $(this).index();

    $('#add').toggle(ix === 0);
    $('#reduce').toggle(ix === 1);
});

$('#add').click(function () {
 alert('add click');
});

$('#reduce').click(function () {
     alert('reduce click');
});