如何在JQuery中使slideToggle動態化

Question

我有一個頁面，其中有多個div，並且每個div中都有一個選項可以單擊並切換信息，我可以通過定義不同的DIV ID來創建，但我認為可以動態地完成，這是我創建的的jsfiddle

CSS

.boxwrap {
    float: left;
    width: 200px;
    height: 250px;
    border: 1px solid #ccc;
    margin: 0 5px 0 0;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
}
.boxwrap_inner {
    float: left;
    width: 100%;
    background: #ddd;
    padding: 5px 0;
    text-align: center;
}
.noDisplay {
    display: none;
}

HTML

<div class="boxwrap">
    <a href="javascript:;" id="button1">Go</a>
    <div class="boxwrap_inner noDisplay" id="content1">
        Content goes here
    </div>
</div>
<div class="boxwrap">
    <a href="javascript:;" id="button2">Go</a>
    <div class="boxwrap_inner noDisplay" id="content2">
        Content goes here
    </div>
</div>

JQuery的

$('#button1').click(function () {
    $("#content1").slideToggle(200);
});
$('#button2').click(function () {
    $("#content2").slideToggle(200);
});

Answer 1

檢查一下：

 $('.boxwrap > a').click(function () { $(this).next().slideToggle(200); }); 

 .boxwrap { float: left; width: 200px; height: 250px; border: 1px solid #ccc; margin: 0 5px 0 0; text-align: center; box-sizing: border-box; padding: 10px; } .boxwrap_inner { float: left; width: 100%; background: #ddd; padding: 5px 0; text-align: center; } .noDisplay { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="boxwrap"> <a href="javascript:;" id="button1">Go</a> <div class="boxwrap_inner noDisplay" id="content1"> Content goes here </div> </div> <div class="boxwrap"> <a href="javascript:;" id="button2">Go</a> <div class="boxwrap_inner noDisplay" id="content2"> Content goes here </div> </div> 

Answer 2

試試這個，

最好使用它調用click事件的父元素指定元素。

$('.boxwrap > a').click(function(){
  $(this).next('div').slideToggle(200);
});

Answer 3

之前的答案依賴於DOM將保持相同的事實，而按鈕之后的next（）元素將始終是內容div。

對於更強大的解決方案，我會在boxwrap中添加一個類（即.boxbtn），並在內容div（即boxcontent）中添加一個類，然后我將執行如下操作：

$('.boxbtn').click(function () {
   $(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});

Answer 4

這里有2個選項

1. 使用相對屬性值
2. 使用尋找相對don元素

 /*$('.toggle_link').click(function () { $($(this).data('toggle')).slideToggle(200); }); OR */ $('.toggle_link').click(function () { $(this).parent().find('.noDisplay').slideToggle(200); }); 

 .boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;} .boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;} .noDisplay{display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="boxwrap"> <a href="javascript:;" id="button1" data-toggle="#content1" class="toggle_link">Go</a> <div class="boxwrap_inner noDisplay" id="content1"> Content goes here </div> </div> <div class="boxwrap"> <a href="javascript:;" id="button2" data-toggle="#content2" class="toggle_link">Go</a> <div class="boxwrap_inner noDisplay" id="content2"> Content goes here </div> </div>