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

【问题标题】：Can I toggle one element and at the same time hide the others?我可以切换一个元素同时隐藏其他元素吗？
【发布时间】：2014-02-13 18:03:45
【问题描述】：

我已经四处寻找了一段时间，但恐怕我对这个简单的 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>

我刚刚创建了一个小提琴，可以更好地解释我的意思：http://jsfiddle.net/vKLNe/

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

【问题讨论】：

你需要在你的javascript函数中隐藏所有其他的div
如果您在同一个元素上单击两次，该元素是否应该被隐藏？

标签： javascript jquery toggle show-hide

【解决方案1】：

您需要将class="toggle" 添加到所有切换的 div 中，然后 http://jsfiddle.net/vKLNe/5/

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

【讨论】：

如果用户想隐藏已经显示的div而不显示另一个？
@NathanP。它已经更新，因此它也可以隐藏点击的一个。
你也可以直接写.not("#"+divId) :)
@NathanP。我明白了，它不必是 jQuery 对象。很高兴知道，谢谢！

【解决方案2】：

Shoot someone beat me to it...但是是的，您可以使用切换或显示，因为您在显示当前单击的 div 之前正在操作多个 div...

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

唯一的缺点是，如果您决定让不同的 div 做不同的事情，可能会导致它们出现问题。

【讨论】：

【解决方案3】：

虽然有像 Freddy's 和 Adam's 这样的方法，但你总是可以依赖某种预定义的手风琴，比如 jquery ui's

http://jqueryui.com/accordion/

或者bootstrap的崩溃

http://getbootstrap.com/javascript/#collapse

而且您不必担心自己处理事件

【讨论】：

【解决方案4】：

您可以通过 css 类来做到这一点。

演示：http://jsfiddle.net/vKLNe/4/

使用隐藏和显示类

一次只有一个 div 有显示类。

html:

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

jquery：

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

css:

.hide {

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

【讨论】：

【解决方案5】：

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

jQuery 中的

$(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();
    });

});

HTML

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

请注意，此代码仅在您没有执行任何动画（例如淡入淡出或滑动）时才有效。 .hide() 和 .show() 只是在调用它们的那一刻更改 CSS，而 .fadeIn() 可能会在指定的毫秒时间内更改 CSS 数千次。

http://jsfiddle.net/vKLNe/8/

【讨论】：