Javascript 如何隐藏多个显示/隐藏DIV'；s当单击另一个DIV时

如何隐藏第二行和第三行中的所有按钮如果在第一行中单击了不同的按钮，并且如果在第二行中单击了另一个按钮，则将隐藏该列的按钮并显示所单击列的按钮？我正在尝试为我的网站实现一个类似的表单，但这对我来说有点困难

示例：如果我单击“iPhone”--按钮iPhone 5、iPhone 4s、iPhone 4和iPhone 3gs显示，然后单击第一行下的“iPhone 5”--按钮at&t、sprint、verizon、unlocked和其他显示，然后我改变主意，决定单击第一行中的“tablet”，即“tablet”按钮显示，但iphone 5的按钮返回隐藏状态，但“平板电脑”的按钮显示

函数显示隐藏（obj）{
var div=document.getElementById（obj）；
如果（div.style.display=='none'）{
div.style.display=''；
}
否则{
div.style.display='none'；
}
}
iPhone5
iPhone4S
iPhone4
iPhone3GS
iPodtouch
iPod Nano
经典iPod
iPad
窗户
角落
美国电话电报公司
冲刺
威瑞森
解锁
其他

试试这个：

<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>iPod</button></a>
<a href="#" onclick="showHide(3)"><button>Tablet</button></a>
</td>
</table>
<div id="q1" style="display: none;">
    <button onclick="subShowHide('1');">iPhone 5</button>
    <button>iPhone 4S</button>
    <button>iPhone 4</button>
    <button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
    <button>iPod Touch</button>
    <button>iPod Nano</button>
    <button>Classic iPod</button>
</div>
<div id="q3" style="display: none;">
    <button>iPad</button>
    <button>Windows</button>
    <button>Nook</button>
</div>
<div id="qq1" style="display: none;">
    <button onclick="subSubShowHide('1');">AT&T</button>
    <button>Sprint</button>
    <button>Verizon</button>
    <button>Unlocked</button>
    <button>Other</button>
</div>
<div id="qqq1" style="display: none;">
    <button>test1</button>
    <button>test2</button>
    <button>test3</button>
</div>
<script>
function showHide(obj) {
    for(i=1;i<=1;i++){
        document.getElementById('qq'+i).style.display = 'none';
    }
    for(i=1;i<=1;i++){
        document.getElementById('qqq'+i).style.display = 'none';
    }
    for(i=1;i<=4;i++){
        if (i == obj) {
            document.getElementById('q'+i).style.display = 'block';
        } else {
            document.getElementById('q'+i).style.display = 'none';
        }
    }
    return false;
}
function subShowHide(obj){
    for(i=1;i<=1;i++){
        document.getElementById('qqq'+i).style.display = 'none';
    }
    for(i=1;i<=1;i++){
        if (i == obj) {
            document.getElementById('qq'+i).style.display = 'block';
        } else {
            document.getElementById('qq'+i).style.display = 'none';
        }
    }
    return false;
}
function subSubShowHide(obj){
    for(i=1;i<=1;i++){
        if (i == obj) {
            document.getElementById('qqq'+i).style.display = 'block';
        } else {
            document.getElementById('qqq'+i).style.display = 'none';
        }
    }
    return false;
}
</script>

iPhone5
iPhone4S
iPhone4
iPhone3GS
iPodtouch
iPod Nano
经典iPod
iPad
窗户
角落
美国电话电报公司
冲刺
威瑞森
解锁
其他
测试1
测试2
测试3
函数显示隐藏（obj）{
对于（i=1；i试试这个：

<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>iPod</button></a>
<a href="#" onclick="showHide(3)"><button>Tablet</button></a>
</td>
</table>
<div id="q1" style="display: none;">
    <button onclick="subShowHide('1');">iPhone 5</button>
    <button>iPhone 4S</button>
    <button>iPhone 4</button>
    <button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
    <button>iPod Touch</button>
    <button>iPod Nano</button>
    <button>Classic iPod</button>
</div>
<div id="q3" style="display: none;">
    <button>iPad</button>
    <button>Windows</button>
    <button>Nook</button>
</div>
<div id="qq1" style="display: none;">
    <button onclick="subSubShowHide('1');">AT&T</button>
    <button>Sprint</button>
    <button>Verizon</button>
    <button>Unlocked</button>
    <button>Other</button>
</div>
<div id="qqq1" style="display: none;">
    <button>test1</button>
    <button>test2</button>
    <button>test3</button>
</div>
<script>
function showHide(obj) {
    for(i=1;i<=1;i++){
        document.getElementById('qq'+i).style.display = 'none';
    }
    for(i=1;i<=1;i++){
        document.getElementById('qqq'+i).style.display = 'none';
    }
    for(i=1;i<=4;i++){
        if (i == obj) {
            document.getElementById('q'+i).style.display = 'block';
        } else {
            document.getElementById('q'+i).style.display = 'none';
        }
    }
    return false;
}
function subShowHide(obj){
    for(i=1;i<=1;i++){
        document.getElementById('qqq'+i).style.display = 'none';
    }
    for(i=1;i<=1;i++){
        if (i == obj) {
            document.getElementById('qq'+i).style.display = 'block';
        } else {
            document.getElementById('qq'+i).style.display = 'none';
        }
    }
    return false;
}
function subSubShowHide(obj){
    for(i=1;i<=1;i++){
        if (i == obj) {
            document.getElementById('qqq'+i).style.display = 'block';
        } else {
            document.getElementById('qqq'+i).style.display = 'none';
        }
    }
    return false;
}
</script>


iPhone5
iPhone4S
iPhone4
iPhone3GS
iPodtouch
iPod Nano
经典iPod
iPad
窗户
角落
美国电话电报公司
冲刺
威瑞森
解锁
其他
测试1
测试2
测试3
函数显示隐藏（obj）{
对于（i=1；i试试这个，我希望它能解决您的需求。


.categories、.serviceProviders按钮{显示：无；}
iPhone5
iPhone4S
iPhone4
iPhone3GS
iPodtouch
iPod Nano
经典iPod
iPad
窗户
角落
美国电话电报公司
冲刺
威瑞森
解锁
其他
$（文档）.ready（函数（e）{
$（'.mainHead'）。每个（函数（索引，元素）{
$（此）。单击（函数（）{
$（'.categories'）.hide（）；
$（'.serviceProviders按钮'）.hide（）；
$（'.categories'）.eq（index.show（）；
});
});
$（'.categories按钮'）。每个（函数（索引，元素）{
$（此）。单击（函数（）{
var temp=$（this.attr（'class'）；
$（'.serviceProviders按钮'）.hide（）；
$（'.serviceProviders按钮'）。每个（函数（）{
if（$（this）.hasClass（temp））{
$（this.show（）；
}
})
});
});
});
试试这个，我希望它能解决您的需求。


.categories、.serviceProviders按钮{显示：无；}
iPhone5
iPhone4S
iPhone4
iPhone3GS
iPodtouch
iPod Nano
经典iPod
iPad
窗户
角落
美国电话电报公司
冲刺
威瑞森
解锁
其他
$（文档）.ready（函数（e）{
$（'.mainHead'）。每个（函数（索引，元素）{
$（此）。单击（函数（）{
$（'.categories'）.hide（）；
$（'.serviceProviders按钮'）.hide（）；
$（'.categories'）.eq（index.show（）；
});
});
$（'.categories按钮'）。每个（函数（索引，元素）{
$（此）。单击（函数（）{
var temp=$（this.attr（'class'）；
$（'.serviceProviders按钮'）.hide（）；
$（'.serviceProviders按钮'）。每个（函数（）{
if（$（this）.hasClass（temp））{
$（this.show（）；
}
})
});
});
});
这是一个非常糟糕的做法，但这里有一个解决方案：

您需要jQuery才能工作，因此jQuery需要在这个脚本之前加载，无论您决定使用哪个选项

将此脚本标记放在标记中。或者放在单独的javascript文档中，并准备好文档：

function showHide(obj) {
  $('#' + obj).toggle('fast');
  console.log('#' + obj);
}

请与我联系以获得更优雅、更流畅的解决方案
这是一种非常糟糕的做法，但以下是解决方案：

您需要jQuery才能工作，因此jQuery需要在这个脚本之前加载，无论您决定使用哪个选项

将此脚本标记放在标记中。或者放在单独的javascript文档中，并准备好文档：

function showHide(obj) {
  $('#' + obj).toggle('fast');
  console.log('#' + obj);
}

Ping me以获得更优雅、更流畅的解决方案
1）创建一个JSFIDLE.net 2）一点jQuery会让你的生活变得更轻松，切换也会变得更好。这个问题在这个网站上已经被回答了100次了-向右看------->@mplungjan我添加了JSFIDLE。我已经检查了这个问题，但我在任何地方都找不到。我不知道jQuery。@mplungjan我看到的是“-mplungjan 10分钟前”.我做错了什么吗？在相关问题中完全正确！1）创建一个jsfiddle.net 2）一点jQuery将使您的生活更加轻松，切换也会变得更好。仅在这个网站上，这个问题就被回答了100次-向右看------->@mplungjan我添加了jsfiddle。我已经检查了这个问题，但找不到答案它在任何地方，我