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

Jquery切换功能 - 在Revelaed内容后触发/按钮

1 个答案: