php - 使用 jQuery 滑动一个 div 打开和一个关闭

Question

我正在尝试使用按钮将一个 div 关闭，同时将另一个打开。这是我的 div 代码：

<div class='toggle_parent'>
    <div class='toggleHolder'>
        <p>Content here</p>
        <span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
    </div>
    <div class='toggled_content' style='display:none;'>
        <p>Hidden Content</p>
    </div>
</div>​

然后jQuery如下：

$(document).ready(function(){

        $('.toggler').click(function() {
            $('.toggleHolder').slideUp().css('display', 'none')
            $('.toggled_conent').slideDown().css('display', '')
      });

    });​

我已经尝试了很多，以至于我的大脑不再起作用，我知道答案将是“很容易我应该想通了”，但我被卡住了。当您按下切换器时，我希望显示切换的内容并且 toggleHolder 消失。

提前致谢！

Answer 1

通过 javascript 而不是 隐藏您的隐藏内容style，并摆脱.css调用：

$(document).ready(function(){

    $('.toggled_content').hide();

    $('.toggler').click(function() {
        $('.toggleHolder').slideUp();
        $('.toggled_content').slideDown();
    });

});​

此外，您的.toggled_content选择器中有错字。

这是一个有效的 JSFiddle。

Answer 2

请在 div 和 jquery 中将 class name = "toggled_content" 更改为其他内容，这样看起来像

jQuery

<script type="text/javascript">
$(document).ready(function(){

        $('.toggler').click(function() {
            $('.toggleHolder').slideUp().css('display', 'none');
            $('.haveOther').slideDown();
      });

    });
</script>

HTML

<div class='toggle_parent' style="background-color:#999;">
    <div class='toggleHolder'>
        <p>Content here</p>
        <span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
    </div>
    <div class='haveOther' style='display:none;'>
        <p>Hidden Content</p>
    </div>
</div>

这对你有用。

Answer 3

你试过这个吗？

$('.toggler').click(function() {
        $('.toggleHolder').slideUp().hide();
        $('.toggled_conent').slideDown().show();
  });