切换隐藏javascript函数

toggle hide javascript function

本文关键字：函数 javascript 隐藏      更新时间：2023-09-26

我有一个div，里面有两个div，我希望div a显示，另一个隐藏。默认情况下，我希望div A显示

<div id="0">
  <div id="A">this is A</div>
  <div id="B">this is B</div>
</div>
<div id="1">
  <button1>this is 1</button>
  <button2>this is 2</button>
</div>

与此分离的是操作它的按钮。

以下是我使用javascript的地方：

$(document).ready(function() {   
$('.toggle').hide();
$('a.togglelink').click(function() {
    $('.toggle').hide();
    $(this).parent().next('.toggle').toggle();
    return false;
    });
});

示例

HTML

<div>
  <div id="divA" class="toggle">this is A</div>
  <div id="divB" class="toggle">this is B</div>
</div>
<div>
  <button value="divA">this is 1</button>
  <button value="divB">this is 2</button>
</div>

JavaScript

showHideDivs("divA");
$("button").on("click", function(){
    showHideDivs(this.value)
});
function showHideDivs(id){
    $(".toggle").hide();
    $("#" + id).show();
}

编辑：@ShowcaseImagery-我意识到这个问题是专门针对bootstrap提出的，我的解决方案更多的是JS/jQuery实现。如果您需要类似的功能，并且正在使用bootstrap，则应该查看折叠手风琴。折叠文档应概述如何正确执行此操作。

div0和div1不是有效的XHTML。我猜这就是你的问题所在。相反，使用这样的id标签：

<div id="div0">YOUR STUFF HERE</div>
<div id="div1">MORE STUFF HERE</div>
相关文章：