当所有孩子都显示无时如何隐藏上部div

Question

我有标题，他们有兄弟姐妹，其中一个是 div clearfix，在这个 div 中有一个 ul 的 box-content 并且有些项目是隐藏的，有些是隐藏的显示有一个应该点击的ol 列表，如果此示例中的项目列表中没有项目电池它不应该显示标题标题（div 类名称为reltitles）请记住我们有许多标题标题和框内容和 div，所以它通常应该工作而不是一个特定的

<div class="reltitles" id="Batteries" style="display:block;">
    <font class="resultHeader">(2) Batteries </font> 
</div>
<div class="clearfix" value="Batteries" name="Batteries" id="Batteries">
    <ul class="box-content" id="Batteries">
        <li id="50-80" class="item first" style="display: none;"></li>
        <li id="50-80" class="item first" style="display: none;"></li>
        <li id="20-50" class="item">
            something here 
        </li>
    </ul>
</div>

要点击的列表：

<ol id="myAnchor">
    <li><a id="0-20" href="#">0.00 - 20.00</a></li>
    <li><a id="20-50" href="#">20.00 - 50.00</a></li>
    <li><a id="50-80" href="#">50.00 - 80.00</a></li>
    <li><a id="80-100" href="#">80.00 - 100.00</a></li>
    <li><a id="All" href="#">All</a></li>
</ol>

这是我用 chrome 工具调试的 java 脚本代码，但我仍然无法弄清楚：

j$("#myAnchor li a").click(function(){
    var prices = j$(".box-content li");
    prices.show();
    if (this.id != "All")
    { prices.not(j$(".box-content li[id='"+this.id+"']")).hide();
    }
    var tt=document.getElementsByClassName("reltitles");
    for(k=0;k<tt.length;k++)
    {
        var clear=tt[k].nextElementSibling;
        var list=clear.childNodes[1].children;
        j=0;
        for(i=0;i<list.length;i++)
            {

            if(list[i].style.display=="none")
            {
                j++;
            }
            if(j==list.length)
                {
                tt[k].style.display="none";
                }
            else{ tt[k].style.display="block";}
            }
    }
     });

更新：id 是唯一的，它们将由 php 代码生成，我只是想更简单地展示一下

Answer 1

抱歉，我不完全确定您到底想在这里做什么。 在这里，我在这里创建了一个 jsfiddle http://jsfiddle.net/5VTYS/4/，我在其中进行了更改以避免您在下面提到的代码中出现的语法错误

$("#myAnchor li a").click(function(){

    var tt=document.getElementsByClassName("reltitles");
    var j = 0;
        for(k=0;k<tt.length;k++)
        {
            var clear=tt[k].nextElementSibling;
            var list=clear.childNodes[1].children;
            for(i=0;i<list.length;i++)
                {
                if(list[i].style.display=="none")
                {
                    j++;
                }
                if(j==list.length)
                    {
                    tt[k].style.display="none";
                    }
                }
        }

});

如果我理解不正确，请编辑代码。

但是，您的代码中有一些语法错误：

1. var list=clear.childNodes[1].children();应该是 var list=clear.childNodes[1].children;

2. j$("#myAnchor li a") 应该是这个 -> $("#myAnchor li a")

3. 在增加值之前定义 j。

希望这会有所帮助。

Answer 2

"这里是一个基于你的标题主题的例子：

HTML：

<div class="reltitles" id="Batteries" style="display:block;">
    <font class="resultHeader">(2) Batteries </font> 
</div>
<div class="clearfix" value="Batteries" name="Batteries" id="BatteriesList">
    <ul class="box-content" id="Batteries">
        <li id="50-80" class="item first" style="display: none;">batterie 1</li>
        <li id="50-80" class="item first" >Batterie 2</li>

        </ul>
    </div>
<ol id="myAnchor">
    <li><a id="0-20" href="#">0.00 - 20.00</a></li>
    <li><a id="20-50" href="#">20.00 - 50.00</a></li>
    <li><a id="50-80" href="#">50.00 - 80.00</a></li>
    <li><a id="80-100" href="#">80.00 - 100.00</a></li>
    <li><a id="All" href="#">All</a></li>
</ol>

JS：

$("#myAnchor li a").click(function(){
   var visible = false;
    $('#BatteriesList').find('li').each(function(value) {
        visible |= $(this).is(":visible");
    });
    if (!visible) {
        $('#Batteries').hide();
    }
});