文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何防止div滑落？

问如何防止div滑落？
EN

Stack Overflow用户
提问于 2019-09-06 18:01:43
回答 1查看 45关注 0票数 1

点击加号，我有一些div可以向下滑动。但是一个扩展的div会扩展另一个。我只需要点击div来推动空格和扩展。我尝试设置包装和显示的溢出。现在我不知道该怎么做了。有人能帮我吗？

Codepen参考：https://codepen.io/nikolinjho/pen/jONYxmj

html：

代码语言：javascript
复制
<div class="container">
    <div class="row">
        <div class="col-sm-4 upon">

                <p class="cust" style="">Lorem ipsum dolor sit amet
                    <i class="fa fa-plus-circle down" aria-hidden="true"> 
                    </i>
                </p>
                <div class="hidden slid-own">
                    <p class="font-6">– Limited Projects approved per 
                   quarter</p>
                    <p class="font-6">– Free base level website hosting, 
                     up to 5 initial revisions prior to launch!</p>
                    <p class="font-6">– A great low-cost option for small 
                      businesses & startups</p>
                    <p class="font-6">– SEO Optimized & Mobile- 
                   Friendly</p>
                    <p class="font-6">– Contains our Google Ads</p>

                </div>
                <p>consectetur adipiscing elit</p>


        </div>
        <div class="col-sm-4 upon">

            <p class="cust" style="">Lorem ipsum dolor sit amet
                <i class="fa fa-plus-circle down" aria-hidden="true"></i>
            </p>
            <div class="hidden slid-own">
                <p class="font-6">– Limited Projects approved per 
                quarter</p>
                <p class="font-6">– Free base level website hosting, up 
               to 5 initial revisions prior to launch!</p>
                <p class="font-6">– A great low-cost option for small 
                 businesses & startups</p>
                <p class="font-6">– SEO Optimized & Mobile-Friendly</p>
                <p class="font-6">– Contains our Google Ads</p>

            </div>
            <p>consectetur adipiscing elit</p>


    </div>
    <div class="col-sm-4 upon">

        <p class="cust" style="">Lorem ipsum dolor sit amet
            <i class="fa fa-plus-circle down" aria-hidden="true"></i>
        </p>
        <div class="hidden slid-own">
            <p class="font-6">– Limited Projects approved per quarter</p>
            <p class="font-6">– Free base level website hosting, up to 5 
           initial revisions prior to launch!</p>
            <p class="font-6">– A great low-cost option for small 
            businesses & startups</p>
            <p class="font-6">– SEO Optimized & Mobile-Friendly</p>
            <p class="font-6">– Contains our Google Ads</p>

        </div>
        <p>consectetur adipiscing elit</p>


  </div>

    </div>
   </div>



  css:

   <style type="text/css">
    .cust {

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .fa-plus-circle, .fa-minus-circle {
        cursor: pointer;
        color: green;
    }

    .upon {
        border: 1px solid #eadddd;
    }
    .upon p {
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 2px; 
    }
    .slid-own .font-6{
        font-size: 12px;
        text-transform: lowercase;
    }
    .hidden {
        display: none;
    }
   </style>

js：

代码语言：javascript
复制
<script type="text/javascript">
    $(".down").click(function () {
        console.log($(this).parent().parent())
        $(this).parent().parent().find(".slid-own").slideToggle();
        $(".down").toggleClass("fa-minus-circle ");

    })
</script>

怎么处理呢？

javascript
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-06 18:13:12

您需要将“and”类div包装在列div中，并分别更改jquery

代码语言：javascript
复制
    <!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="container">
      <div class="row">
        <div class="col-sm-4 ">
          <div class="upon">
            <p class="cust" style="">Lorem ipsum dolor sit amet
              <i class="fa fa-plus-circle down" aria-hidden="true"></i>
            </p>
            <div class="hidden slid-own">
              <p class="font-6">– Limited Projects approved per quarter</p>
              <p class="font-6">– Free base level website hosting, up to 5 initial revisions prior to launch!</p>
              <p class="font-6">– A great low-cost option for small businesses & startups</p>
              <p class="font-6">– SEO Optimized & Mobile-Friendly</p>
              <p class="font-6">– Contains our Google Ads</p>
            </div>
            <p>consectetur adipiscing elit</p>
          </div>
        </div>
        <div class="col-sm-4 ">
          <div class="upon">
            <p class="cust" style="">Lorem ipsum dolor sit amet
              <i class="fa fa-plus-circle down" aria-hidden="true"></i>
            </p>
            <div class="hidden slid-own">
              <p class="font-6">– Limited Projects approved per quarter</p>
              <p class="font-6">– Free base level website hosting, up to 5 initial revisions prior to launch!</p>
              <p class="font-6">– A great low-cost option for small businesses & startups</p>
              <p class="font-6">– SEO Optimized & Mobile-Friendly</p>
              <p class="font-6">– Contains our Google Ads</p>
            </div>
            <p>consectetur adipiscing elit</p>
          </div>
        </div>
        <div class="col-sm-4 ">
          <div class="upon">
            <p class="cust" style="">Lorem ipsum dolor sit amet
              <i class="fa fa-plus-circle down" aria-hidden="true"></i>
            </p>
            <div class="hidden slid-own">
              <p class="font-6">– Limited Projects approved per quarter</p>
              <p class="font-6">– Free base level website hosting, up to 5 initial revisions prior to launch!</p>
              <p class="font-6">– A great low-cost option for small businesses & startups</p>
              <p class="font-6">– SEO Optimized & Mobile-Friendly</p>
              <p class="font-6">– Contains our Google Ads</p>
            </div>
            <p>consectetur adipiscing elit</p>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

$(".down").click(function () {
 console.log($(this).parent().parent())
 $(this).parent().parent().parent().find(".slid-own").slideToggle();
 $(".down").toggleClass("fa-minus-circle ");
})
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57819849

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档