Question

我希望有多个网址可以切换不同的隐藏div

<a href="#" class="hideButton" id="div1_button">BTN</a>
<a href="#" class="hideButton" id="div2_button">BTN</a>

<div id="div1">
  text here
  <a href="#">CLOSE DIV</a>
</div>

这是脚本代码（只是因为我需要在我的消息中添加一些文字......）：

<script>

$( ".hidenBox" ).hide();

$( ".toggleBtn" ).click( function(){
        var div = $(this).attr('id');
        $( div + "_box" ).toggle();
} );

$( ".hideBoxBtn" ).click( function(){
        $( this ).closest(".hidenBox").toggle();
} );

</script>
<div id="div2">
  <div>
    text here
    <a href="#">CLOSE DIV</a>
  </div>
</div>

Answer 1

您的代码应如下所示。

＆＃13;

$(".hidenBox").hide();

$(".toggleBtn").click(function () {
     var div = this.id.split('_')[0];
     $('#' + div).toggle();
});

$(".hideBoxBtn").click(function () {
     $(this).closest(".hidenBox").toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="toggleBtn" id="div1_button">BTN</a>
<a href="#" class="toggleBtn" id="div2_button">BTN</a>

<div id="div1" class="hidenBox">
    text here 1
    <a href="#" class="hideBoxBtn">CLOSE DIV</a>
</div>
<div id="div2" class="hidenBox">
    text here 2
    <a href="#" class="hideBoxBtn">CLOSE DIV</a>
</div>

＆＃13;

Answer 2

$( ".hidenBox" ).hide();

$( ".toggleBtn" ).click( function(){
        var div = $(this).attr('id');

        $( "#" + div + "_box" ).toggle();
} );

$( ".hideBoxBtn" ).click( function(){
        $( this ).closest(".hidenBox").toggle();
} );

jquery - 切换div的数量

2 个答案: