Question

我正在尝试通过单击按钮上的空间问题来扩展内部div。当用户点击按钮时，我想隐藏其兄弟姐妹和父母的兄弟姐妹，直到指定的id。如何使用jquery在javascript中执行此操作？

以下是一个例子：

DOM：

<div id="p">
    <div id="p1-1">
        <div id="c1-1-1">
            <button id="expand"></button>
        </div>
        <div id="c1-1-2">
        </div>
    </div>
    <div id="p1-2">
        <div id="c1-2-1">
        </div>
    </div>
    <div id="p1-3">
        <div id="c1-3-1">
        </div>
    </div>
</div>

结果Dom：

<div id="p">
    <div id="p1-1">
        <div id="c1-1-1">
            <button id="expand"></button>
        </div>      
    </div>  
</div>

Answer 1

使用parentsUntil()找到要保持可见的元素，使用each()循环显示它们，然后隐藏它们的兄弟（）。

$(button).click(function(){
    var elementsToKeep = $(this).parentsUntil('#stop_element_id');
    elementsToKeep.each(function(){
        $(this).siblings().hide();
    });
});

没有足够的代表发布到兄弟姐妹的链接（）。

Answer 2

如果我正确理解了这个问题：

$("#expand").on("click", function () {
    // Toggle text
    var text = $(this).text() == "Expand" ? "Collapse" : "Expand";
    $(this).text(text);
    // Toggle proximal element state
    $(this).parent().siblings().toggle();
    $(this).parent().parent().siblings().toggle();
});

See this live example

Answer 3

'while-until'循环应该可以解决问题：

var str_stop_id = "p",
    $el = $(this).parent();
while ($el.attr('id') !== str_stop_id) {
    $el = $el.siblings().hide().end().parent();
}

http://jsfiddle.net/mblase75/Wc2Pf/

Answer 4

这很好用：

string GetQuery() => "INSERT INTO students (id, name) VALUES (7, @name)"
                         .Replace("@name", "bad value from user");

使用JQuery隐藏兄弟姐妹和父母的兄弟姐妹，直到给定的id

4 个答案: