Jquery 切换功能 - Trigger/Button 显示内容后

Question

我一直在努力解决这个问题，我相信一定有一个简单的解决方案！我有一个简单的按钮可以触发 Jquery 切换 reveal/hide，它工作正常：

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>

我需要的是 button/trigger 出现在显示的内容之后。移动按钮似乎会破坏一切，所以我猜想在代码流中它必须出现在切换内容之前？无论如何，如果没有一些令人讨厌的 CSS 黑客攻击，是否可以实现这一目标？

谢谢，

詹姆斯

Answer 1

Moving the button seems to break things so I guess in the flow of the code it has to appear before the toggled content?

这只是因为您正在使用 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);

Jquery 切换功能 - Trigger/Button 显示内容后

Jquery Toggle Function - Trigger/Button After Revelaed Content

javascript

jquery

toggle