Question

我试图通过一个选择选项来切换。我很难切换超过两个选项。我的目标是通过选择选项可以切换到 4 。例如, 分类和子分类。这是我在 < a href=" http://jsfiddle. net/ uA7XD/ 64" rel=“ no follow” >jsfidle 中的例子。

<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>

Answer 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

这一逻辑将有利于任何深度的再现。

EDIT: Assuming each menu is a ul. You ll have to tweak the selectors. This is just one way to do it. Not the best if you have events firing on visibility, or if you have ui reflow issues.

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");
        }
    }
}

我测试过这个代码,只是一般参考

EDIT:这里的小问题:http://jsfiddle.net/ uA7XD/76/

友情链接