javascript - 如何防止div下滑?

标签 javascript html css

我有一些 div 可以通过点击加号向下滑动。但是一个扩展的 div 会扩展另一个。我只需要单击 div 来插入空间和扩展。我试图设置包装器和显示的溢出。现在我不知道该怎么办。有人能帮我吗?

Codepen 引用:https://codepen.io/nikolinjho/pen/jONYxmj

HTML:

<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:

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

如何处理?

最佳答案

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

    <!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 ");
})

关于javascript - 如何防止div下滑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57819849/

相关文章:

javascript - 无法在 angularjs 中调用 ng-click ?

javascript - 需要 jQuery 内容 slider

html - br :last-child not working when an element is after the br

css - 为什么使用 moz-radial-gradient 滚动这么慢?

javascript - 缩放 iframe 内容

css - 以另一个 DIV 为中心 float 一个 DIV

javascript - 如何在 JSX 中重复一个元素?

javascript - 防止 PHP 中表单过快地重新提交

javascript - 使用循环使用值填充变量,然后检索该变量的特定 "moment"

javascript - 使用 deepWithDataAndEvents = true 克隆的可拖动无法再次拖动