Javascript 我可以切换一个元素，同时隐藏其他元素吗？

我已经四处寻找了一段时间，但恐怕我太贪心了，不适合这个简单的jquery

我尝试过显示/隐藏和切换功能，但我没有找到在隐藏其他元素的页面中显示切换元素的方法。切换功能正常，但当我单击其中一个时，我希望其他的都隐藏起来，但我找不到方向。也许这太容易了，但我找不到答案

这是我的jquery

function toggleDiv(divId) { $("#"+divId).toggle();}

这是html示例

<a href="javascript:toggleDiv('div1');">Toggle Button 1</a>
<div id="div1">
<p>paragraph 1</p>
</div>
<a href="javascript:toggleDiv('div2');">Toggle Button 1</a>
<div id="div2">
<p>paragraph 2</p>
</div>

第1款

第2款

我刚刚创作了一把小提琴，更好地解释了我的意思：

---

提前感谢您的帮助，并对我的英语感到抱歉。

您需要向所有切换的div添加

class=“toggle”

，然后

---

有人开枪打我。。。但是是的，你可以使用切换或显示，因为你在显示当前点击的div之前正在操作多个div

function toggleDiv(divId) { 
    $('div').hide();
    $("#"+divId).toggle();
}

---

唯一的缺点是，如果你决定让不同的div做不同的事情，这可能会引起他们的问题。

尽管有像Freddy和Adam这样自己做的方法，但你总是可以依赖一些预定义的手风琴，比如jquery ui

还是引导崩溃

---

您不必担心自己处理事件

您可以通过css类来完成

演示：

使用隐藏和显示类

一次只有一个部门有表演课

html:

css:

---

与内联JS相比，使用事件监听器要实际得多：

jqueryin

$(document).ready(function(){

    // listen for clicking of the <a>
    $('a').on('click', function(e){
        // don't let the <a> perform it's default action
        e.preventDefault();

        // hide all divs
        $('div').hide();

        // show the <div> which is after the <a> which you clicked
        $(this).next('div').show();
    });

});

$（文档）.ready（函数（）{
//听一下按钮的点击
第1款





第2款





第3款

请注意，此代码之所以有效，是因为您没有执行任何动画，例如淡入淡出或滑动。

.hide（）

和

.show（）

仅在调用CSS时更改CSS，其中as

。fadeIn（）

将在指定的毫秒周期内更改CSS数千次

---

您需要隐藏javascript函数中的所有其他div如果您在同一个元素上单击两次，该元素是否应该隐藏？如果用户希望隐藏已显示的div而不显示另一个div？@NathanP。它已更新，因此也可以隐藏单击的div。您也可以直接编写

。而不是（“#”+divId）

）@我明白了，它不一定是jQuery对象。很高兴知道，谢谢！

<a href="javascript:toggleDiv('div1');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 1</a>

<div class="hide" id="div1" style="background-color: #aaa; padding: 5px 10px;  width:200px;">
<p>paragraph 1</p>
</div>
<br /><br />


<a href="javascript:toggleDiv('div2');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 2</a>

<div class="hide" id="div2" style="background-color: #aaa; padding: 5px 10px;  width:200px;">
<p>paragraph 2</p>
</div>
 <br /><br /> 



<a href="javascript:toggleDiv('div3');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 3</a>

<div class="hide" id="div3" style="background-color: #aaa; padding: 5px 10px;  width:200px;">
<p>paragraph 3</p>
</div>

function toggleDiv(divId) {
    $(".show").addClass('hide').removeClass('show');
    $("#"+divId).addClass('show').removeClass('hide');
}

.hide {

    display: none;
}
.show {
 display: block;   
}

$(document).ready(function(){

    // listen for clicking of the <a>
    $('a').on('click', function(e){
        // don't let the <a> perform it's default action
        e.preventDefault();

        // hide all divs
        $('div').hide();

        // show the <div> which is after the <a> which you clicked
        $(this).next('div').show();
    });

});

<!-- notice the <a> tags have an href="#", no more inline JS! -->
<a href="#" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 1</a>

<div id="div1" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
    <p>paragraph 1</p>
</div>
<br />
<br />
<a href="#" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 2</a>

<div id="div2" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
    <p>paragraph 2</p>
</div>
<br />
<br />
<a href="#" style="background-color: #ccc; padding: 5px 10px;">Toggle Button 3</a>

<div id="div3" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
    <p>paragraph 3</p>
</div>