Question

我一直在寻找一段时间，但我担心这个简单的jquery太过于be。

我曾尝试显示/隐藏和切换功能，但我找不到在页面中显示切换元素隐藏其他元素的方法。切换工作，但当我点击一个，我希望其他人隐藏，我找不到方法。也许这太容易了，但我找不到答案。

这是我的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/

先谢谢你的帮助，对我的英语感到抱歉。

Answer 1

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

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

Answer 2

拍摄有人殴打我...但是你可以使用切换或显示因为你在显示当前点击的div之前操纵多个div ...

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

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

Answer 3

虽然像弗雷迪和亚当一样有自己的方法可以做到这一点，但你总是可以依赖某种预定义的手风琴，比如jquery ui's

http://jqueryui.com/accordion/

或bootstrap崩溃

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

您不必担心自己处理事件

Answer 4

你可以通过css类来完成这个。

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

使用隐藏和显示类

并且一次只有一个div会有show class。

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

Answer 5

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

jQuery in

$(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时更改CSS，因为.fadeIn()可能会在指定的毫秒时间内将CSS改变数千次。

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

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

5 个答案: