Question

我正在创建一个网格，其中我将有单独的框。单击这些框，我将显示SET @s = 'Any_charecter'; SELECT * FROM test WHERE @s REGEXP '[0-9]+' AND S_ID = @s; SET @s = 121; -- 'Any_charecter'; SELECT * FROM test WHERE @s REGEXP '[0-9]+' AND S_ID = @s;，其中包含与该框相关的数据。我正在使用foreach(var list1item in lbl) //List1 item { foreach(var list2item in value) //List2 item { if(list1item == list2item) { //Do something } } }＆＃39; div来显示jquery。

整个设置工作正常，我很满意。第一个slideToggle包含框，点击每个框后，内容如下所示：

＆＃13;

div

＆＃13;

row

＆＃13;

// Code goes here

$(document).ready(function() {

    $('.info-content-box').hide();

    var openedId = '';

    $('.info-box .info-header').click(function(e) {
        var id = '#' + $(this).data('name');

        if (openedId ==='') {
            $(id).slideToggle(400, function() {
                openedId = id;
            });
        } else {

            if (openedId == id) {
                $(openedId).slideToggle(400, null);
            } else {
                $(openedId).hide(10);
                $(id).fadeToggle(400, function() {
                    openedId = id;
                });
            }
        }
    })
})

＆＃13;

但是，我希望我的代码段为/* Styles go here */ .info-box { text-align: center; height: 200px; color: white; } .info-box .info-header { background-color: #3178b9; height: 90%; border: 1px solid #f5f0e7; display: flex; justify-content: center; align-items: center; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; transition: all 150ms ease-out; } .info-box .info-header:hover { background-color: #b4a28f; border: 5px solid #f5f0e7; -webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; } .info-box .info-header .info-line { float: left; background-color: white; height: 2px; width: 0%; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; transition: all 150ms ease-out; } .info-box .info-header:hover .info-line { float: left; background-color: white; height: 2px; width: 30%; -webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; } .info-content-box { padding-bottom: 30px; width: 100%; }，即我希望该框在响应模式下显示在框下方。但由于我已将内容<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" style="padding-top:50px;"> <div class="row"> <div class="col-md-3 info-box"> <div class="info-header" data-name="content1"> <div class="info-line"></div> <p>hello</p> <div class="info-line"></div> </div> </div> <div class="col-md-3 info-box"> <div class="info-header" data-name="content2"> <p>hello</p> </div> </div> <div class="col-md-3 info-box"> <div class="info-header" data-name="content3"> <p>hello</p> </div> </div> <div class="col-md-3 info-box"> <div class="info-header" data-name="content4"> <p>hello</p> </div> </div> </div> <div class="row"> <div class="container"> <div class="info-content-box" id="content1"> <div class="row"> <div class="col-md-3"> <img class="img img-responsive" src="http://placehold.it/500?text=Content1" alt="" /> </div> <div class="col-md-9"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p> </div> </div> </div> <div class="info-content-box" style="text-align: right" id="content2"> <div class="row"> <div class="col-md-9"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p> </div> <div class="col-md-3"> <img class="img img-responsive" src="http://placehold.it/500?text=Content2" alt="" /> </div> </div> </div> <div class="info-content-box" id="content3"> <div class="row"> <div class="col-md-3"> <img class="img img-responsive" src="http://placehold.it/500?text=Content3" alt="" /> </div> <div class="col-md-9"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p> </div> </div> </div> <div class="info-content-box" style="text-align: right" id="content4"> <div class="row"> <div class="col-md-9"> <h3>Heading</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p> </div> <div class="col-md-3"> <img class="img img-responsive" src="http://placehold.it/500?text=Content4" alt="" /> </div> </div> </div> </div> </div> </div>放在方框responsive下面的div中，因此内容会显示在所有方框的末尾。

请帮我解决这个问题。

您可以在row - https://plnkr.co/edit/OiIjS2AmNKeqS1YqPph4

找到我的代码

基本上我想要达到的是 - http://www.tri-north.com/Home/Projects?filterCategory=&r=0

此处内容将打开，推送下面的所有其他框。它在响应模式下也很有效。

修改

我结合了 StefanBob 的答案并将我的js修改为以下内容：

row

这实际上检查了窗口宽度，并在insertAfter和just切换之间进行选择。虽然这可以按预期工作，但请告诉我是否有正确的方法来实现这一目标。上面的解决方案看起来像是一个黑客攻击。

Answer 1

在点击功能中，您只需点击.info-content-box和insertAfter`.info-box

＆＃13;

// Code goes here

$(document).ready(function() {

    $('.info-content-box').hide();

    var openedId = '';

    $('.info-box .info-header').click(function(e) {
        var id = '#' + $(this).data('name');

        if (openedId ==='') {
            $(id).insertAfter($(this).parent());
            $(id).slideToggle(400, function() {
                openedId = id;
            });
        } else {

            if (openedId == id) {
            $(id).insertAfter($(this).parent());
                $(openedId).slideToggle(400, null);
            } else {
                $(openedId).hide(10);
                $(id).fadeToggle(400, function() {
                    openedId = id;
                });
            }
        }
    })
})

＆＃13;

/* Styles go here */

.info-box {
    text-align: center;
    height: 200px;
    color: white;
}

.info-box .info-header {
    background-color: #3178b9;
    height: 90%;
    border: 1px solid #f5f0e7;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 150ms ease-out;
    -moz-transition: all 150ms ease-out;
    -o-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
}

.info-box .info-header:hover {
    background-color: #b4a28f;
    border: 5px solid #f5f0e7;
    -webkit-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
}

.info-box .info-header .info-line {
	float: left;
    background-color: white;
    height: 2px;
    width: 0%;
    -webkit-transition: all 150ms ease-out;
    -moz-transition: all 150ms ease-out;
    -o-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
}

.info-box .info-header:hover .info-line {
	float: left;
    background-color: white;
    height: 2px;
    width: 30%;
    -webkit-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
}

.info-content-box {
    padding-bottom: 30px;
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="padding-top:50px;">
      <div class="row">
        <div class="col-md-3 info-box">
          <div class="info-header" data-name="content1">
            <div class="info-line"></div>
            <p>hello</p>
            <div class="info-line"></div>
          </div>
        </div>
        <div class="col-md-3 info-box">
          <div class="info-header" data-name="content2">
            <p>hello</p>
          </div>
        </div>
        <div class="col-md-3 info-box">
          <div class="info-header" data-name="content3">
            <p>hello</p>
          </div>
        </div>
        <div class="col-md-3 info-box">
          <div class="info-header" data-name="content4">
            <p>hello</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div class="info-content-box" id="content1">
            <div class="row">
              <div class="col-md-3">
                <img class="img img-responsive" src="http://placehold.it/500?text=Content1" alt="" />
              </div>
              <div class="col-md-9">
                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p>
              </div>
            </div>
          </div>
          <div class="info-content-box" style="text-align: right" id="content2">
            <div class="row">
              <div class="col-md-9">
                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p>
              </div>
              <div class="col-md-3">
                <img class="img img-responsive" src="http://placehold.it/500?text=Content2" alt="" />
              </div>
            </div>
          </div>
          <div class="info-content-box" id="content3">
            <div class="row">
              <div class="col-md-3">
                <img class="img img-responsive" src="http://placehold.it/500?text=Content3" alt="" />
              </div>
              <div class="col-md-9">
                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p>
              </div>
            </div>
          </div>
          <div class="info-content-box" style="text-align: right" id="content4">
            <div class="row">
              <div class="col-md-9">
                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eum accusantium consectetur, ab esse doloremque cum, accusamus inventore illo soluta facere illum natus quam dolorum vitae, assumenda harum sit earum.</p>
              </div>
              <div class="col-md-3">
                <img class="img img-responsive" src="http://placehold.it/500?text=Content4" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

Answer 2

使用jquerys动画功能

我已经从jquery网站添加了文档，并且因为我懒得把完整的代码示例放到codepen链接中，希望这有帮助

<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='showBox'>
<img class='show'>
<img class='show'>
<img class='show'>
<img class='show'>
</div>

    body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.foo {
  width: 200px;
  height: 200px;
  background-color: black;
  display: inline-block;
  margin: 20px auto;
}

.foo:hover {
  background-color: green;
  cursor: pointer;
}

.show {
/*haha ironic*/
  display: none;
  background-color: blue;
}

.showBox {
  display:none;
  width:100%;
  height: 200px;
  background-color: red;
}

$(function(){
  $('.foo').on('click', function(){
    $('.showBox').animate({
      height: "toggle"
    }, 1500);
  });
});

编辑：我强烈建议如果你想隐藏一些东西，在css中将display属性设置为none，而不是你的js代码。

https://codepen.io/nicholas-rotondo/pen/bWjoBz

http://api.jquery.com/animate/

内容在其下方滑动的框

2 个答案: