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选择器中也有拼写错误。

Here's a working JSFiddle

Answer 2

你试过这个吗？

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

Answer 3

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

<强>的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>

这对你有用。

使用jQuery滑动一个div打开，一个关闭

3 个答案: