jQuery切换选择选择机制

时间:2012-05-23 19:49:22

标签: javascript jquery javascript-events toggle

我正在尝试通过选择选项切换。我有困难切换两个以上。我的目标是通过select选项切换到4。例如类别和子类别。以下是jsfiddle中的示例。

<script type="text/javascript">
    var op = $("#tables option[value='options']:selected");
    var os = $("#tables option[value='Example2']:selected");
    if (op.length)
        $("#something").show();
    else
        $("#something").hide();
    if (op == ("#something").show())
             $("#something2").show();
    else
        $("#something2").hide();

}​
</script>

1 个答案:

答案 0 :(得分:1)

这是您正在寻找的设计模式吗?

if your object is not selected
    if your parent is selected
        you are also selected
    else
        you are selected
else
    you are now unselected

此逻辑适用于任何递归深度。

编辑:假设每个菜单都是ul。你必须调整选择器。 这只是一种方法。如果您在可见性上触发事件,或者您有ui回流问题,则不是最好的。

clickyclicky = function(event) {
    var $target = $(event.currentTarget);
    if (!$target.hasClass("selected")) {
        // hide the old target and its parents
        var $oldTarget = $('.selected');
        $oldTarget.removeClass("selected").hide().parents('ul').hide();
        // show the new target and its parents
        $target.show().addClass("selected").parents('ul').show();
    } else {
        // hide the target
        $target.removeClass("selected").hide();
        // move the selected token to the parent.
        $parent = $target.parent().parent(); // assuming an ul/li tree pattern.
        if ($parent.is('ul')) {
            $parent.addClass("selected");
        }
    }
}

我没有测试过这段代码,它只是一般参考。

编辑:这是小提琴:http://jsfiddle.net/uA7XD/76/