Question

我试图在点击按钮时显示或隐藏内容。但是这样做会产生这种不稳定的效果。有人可以告诉我构建标记是否有任何问题。也可以在切换时提供平滑的切换效果。

＆＃13;

$(document).ready(function() {
  $("#anchor-1").click(function () {
    if ($('#pre-1:visible').length)
      $('#pre-1').hide();
    else
      $('#pre-1').show();
  });
});

＆＃13;

.hide {
  display: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <a href="javascript:;" id="anchor-1">Show code</a>
    </div>
  </div>
  <div class="col-md-12">
    <pre id="pre-1" class="text-left rad-0 text-danger hide">
      "<h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>"
    </pre>
  </div>
</div>

＆＃13;

Answer 1

您可以使用解决方案https://jsfiddle.net/rue2e2cu/3/

$(document).ready(function() {
  $("#anchor-1").click(function () {
    if ($('#pre-1:visible').length)
      $('#pre-1').slideUp();
    else
      $('#pre-1').slideDown();
  });
});

.hide {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <a href="javascript:;" id="anchor-1">Show code</a>
    </div>
    <div class="col-md-12">
      <pre id="pre-1" class="text-left rad-0 text-danger hide">
        "<h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>"
      </pre>
    </div>
  </div>
</div>

我使用了slideUp＆amp; slideDown代替hide＆amp;分别为show。

希望这会对你有所帮助。

Answer 2

对html的更改： -

将'col-md-12'放在'row'
将style="display: none"添加到隐藏内容中（内联样式不理想，但如果使用'hidden'，则bootstrap会停止jQuery显示内容）。删除.hide { display: none; }
将<pre>中的代码更改为<和>

所以：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
            <a href="javascript:void(0);" id="anchor-1">Show code</a>
        </div>
        <div class="col-md-12">
            <pre id="pre-1" class="text-left rad-0 text-danger" style="display: none">
&lt;h1&gt;Heading 1&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;/h6&gt;
            </pre>
        </div>
    </div>
</div>

对jQuery的更改：

$(document).ready(function () {
    $("#anchor-1").click(function (e) {
        // Added
        e.preventDefault();
        // Changed
        if ($("#pre-1").is(":visible")) {
            // Use fadeOut() and fadeIn()
            $('#pre-1').fadeOut();
        } else {
            $('#pre-1').fadeIn();
        }
    });
});

基本上，fadeOut（）和fadeIn（）应该消除'生涩'效果。希望它有所帮助。

Answer 3

因为身高。

Jquery无法获得高度，因为它处于隐藏状态，所以jquery继承了默认高度。

当您切换锚点时，由于其内容高度，它会切换滚动条。因此，如果您默认添加滚动条，则问题将得到解决。

在你的情况下，

解决方案1：

默认情况下，只需启用滚动条

 html{overflow-y: scroll;}

小提琴：https://jsfiddle.net/rue2e2cu/6/

    $(document).ready(function() {
        $("#anchor-1").click(function () {
            if ($('#pre-1:visible').length)
                $('#pre-1').hide();
            else
                $('#pre-1').show();
        });
    });

.hide {
  display: none;
}

html{overflow-y: scroll;}

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
        
        
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <a href="javascript:;" id="anchor-1">Show code</a>
    </div>
  </div>
  <div class="col-md-12">
    <pre id="pre-1" class="text-left rad-0 text-danger hide">
                    "<h1>Heading 1</h1>
                        <h2>Heading 2</h2>
                        <h3>Heading 3</h3>
                        <h4>Heading 4</h4>
                        <h5>Heading 5</h5>
                        <h6>Heading 6</h6>"
            </pre>
  </div>
</div>

解决方案2：

使用父div包装容器并向其添加高度（或直接添加到容器中）以启用滚动条，使其类似于

.parent{height:101vh;}

和工作小提琴https://jsfiddle.net/rue2e2cu/4/

    $(document).ready(function() {
        $("#anchor-1").click(function () {
            if ($('#pre-1:visible').length)
                $('#pre-1').hide();
            else
                $('#pre-1').show();
        });
    });

.hide {
  display: none;
}
.parent{height:101vh;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    
    <div class="parent">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <a href="javascript:;" id="anchor-1">Show code</a>
    </div>
  </div>
  <div class="col-md-12">
    <pre id="pre-1" class="text-left rad-0 text-danger hide">
                    "<h1>Heading 1</h1>
                        <h2>Heading 2</h2>
                        <h3>Heading 3</h3>
                        <h4>Heading 4</h4>
                        <h5>Heading 5</h5>
                        <h6>Heading 6</h6>"
            </pre>
  </div>
</div>
</div>

使用jQuery切换内容时生涩的效果

3 个答案: