Jquery切換功能 - 觸發/按鈕後Revelaed內容

Question

我一直在努力與此，我敢肯定，必須有一個簡單的解決方案！我有一個簡單的按鈕觸發一個jQuery切換顯示/隱藏這是工作的罰款：

JS

<script type="text/javascript"> 
$(document).ready(function() { 
//hide the all of the element with class msg_body 
    $(".reveal-info-1").hide(); 
    //toggle the componenet with class msg_body 
    $(".reveal-btn").click(function(){ 
    $(this).next(".reveal-info-1").slideToggle(500); 
    }); 
    }); 
</script> 

我的HTML看起來像這樣（有很多的內容，所以我已經簡化它）：

<div class="reveal-1"> 
<div class="reveal-btn"><input type="button" value="Read More" id="reveal-btn-1" class="reveal-btn" /></div> 
<div class="reveal-info-1"> 
    <p>Content goes here</p> 
</div 
</div> 

我需要的是讓按鈕/觸發器出現在顯示的內容之後。移動按鈕似乎打破了一些東西，所以我猜想在切換內容之前它必須出現的代碼流中？無論如何沒有一些討厭的CSS黑客來實現這一點？

感謝，

詹姆斯

Answer 1

移動按鈕似乎打破東西，所以我在它有切換內容之前出現的代碼流猜？

這只是因爲你使用jQuery .next，它尋找下一個相鄰的HTML元素。

改變順序，改變該行.prev，它會被固定：

$(document).ready(function() { 
 
    //hide the all of the element with class msg_body 
 
    $(".reveal-info-1").hide(); 
 
    //toggle the componenet with class msg_body 
 
    $(".reveal-btn").click(function() { 
 
    $(this).prev(".reveal-info-1").slideToggle(500); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="reveal-1"> 
 
    <div class="reveal-info-1"> 
 
    <p>Content goes here</p> 
 
    </div> 
 
    <div class="reveal-btn"><input type="button" value="Read More" id="reveal-btn-1" class="reveal-btn" /></div> 
 
</div>

或者，你不需要使用prev或next - 你可以簡單地通過它的選擇器單獨處理該元素（就像你將它隱藏在負載上一樣）：

$(".reveal-info-1").slideToggle(500);