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