Question

///我试图通过单击按钮来动态更改设计的网格布局，

<div class="row">
<div class="col-md-6 offset-md-3">
    <div class="row">
        <div class="first">
            <div class="col-md-2">Steppers</div>
            <div class="col-md-8">
                some content
                <button id="change">Change Button</button>
            </div>
        </div>
    </div>
</div>

//单击按钮，此布局应更改并分成两部分，新的动态内容应出现在其中。

<div class="row">
<div class="col-md-6">
    <div class="first">
            <div class="col-md-2">Steppers</div>
            <div class="col-md-8">
                some content
                <button id="change">Change Button</button>
            </div>
    </div>
</div>

<div class="col-md-6">
    <div class="second">some new dynamic content here</div>
</div>

Answer 1

这里有一些jQuery可以做到这一点：

$("#change").on("click", function() {
    $(".col-md-6.offset-md-3").removeClass("offset-md-3").children("row").addClass("first").removeClass("row");
    $(".row").append(`<div class="col-md-6"><div class="second">some new dynamic content here</div></div>`);
})

Answer 2

有两种方法可以实现您想要的。

带有将代码附加到HTML中的代码
两个隐藏并显示HTML

  $( "#container" ).hide();

$( "#change" ).click(function() {
  $( "#container" ).append( "<div class=\"col-md-6\"> <div class=\"second\">some new dynamic content here</div></div>");
});

$( "#change2" ).click(function() {
  $( "#container" ).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
<div class="col-md-6">
    <div class="first">
            <div class="col-md-2">Steppers</div>
            <div class="col-md-8">
                some content
                <button id="change">Change Button</button>
                  <button id="change2">Change Method2</button>
            </div>
    </div>
</div>

<div id="container">
<div class="col-md-6"> <div class="second">some new dynamic content here</div></div>
</div>

通过单击动态更改引导程序上的网格图案

2 个答案: