Question

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

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

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

当我尝试点击它时，切换隐藏了+/-。
更改一个+/-会更改所有其他的。

请告知如何解决此问题，谢谢！

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

Not sure but may be u need this

$('#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');
});

jQuery切换内部切换，具有单独选择

3 个答案:

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