Question

我有一个面板标题和一个面板主体，在页面重新加载时默认具有描述。当我点击 + 符号时，会显示一些内容以及要删除的说明。

一切都运转良好。但当我滑动时，会出现描述，但突然出现一种中风。

我可以使用time unit来做，但它会为它增加淡入效果。我不想要的。

＆＃13;

$('.add_discount_plus_minus').on('click', function () {
  if($(this).text() === "+" ) {
    $(this).text("-");
    $('.club_registration_plus_minus').text("+");
    $('.settings_plus_minus').text("+");
    $('.add_discount_one_line_description').hide();
    $('.show_hide_add_discount_panel').slideDown();
  } else {
    $(this).text("+");
    /*$(this).css('font-size' , '20px');*/
    $('.show_hide_add_discount_panel').slideUp();
    $('.add_discount_one_line_description').show();
  }
})

＆＃13;

.add_discount_plus_minus {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-100%);
  font-size: 20px;
}

.show_hide_add_discount_panel {
  display: none;
}

.set_padding_0 {
  padding: 0 !important;
}

.set_margin_0 {
  margin: 0 !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="panel panel-default set_padding_0">

  <div class="panel-heading text-left">
    <div class="row">
      <div class="col-lg-10 col-md-10 col-sm-10">
        <span>Add Discount</span>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2">
        <span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
      </div>
    </div>
  </div>

  <div class="panel-body ">
    <div class="row set_margin_0">
      <span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
    </div>
    <div class="show_hide_add_discount_panel ">
      <div class="row margin_top_10 set_margin_0">
        <span>Some contents to be displayed</span>
      </div>
      <div class="row margin_top_10 set_margin_0">
        <span>Some contents to be displayed</span>
        <div></div>
      </div>
    </div>
  </div>
  
</div>

＆＃13;

这是JSFiddle

当您向上滑动面板主体时，会突然显示说明。我该如何解决？

任何帮助都会很棒。

谢谢。

Answer 1

然后，您应该在看到默认内容之前尝试添加一些<html> <head> <meta charset="UTF-8"> <title>pie map</title> </head> <body> <script src="http://d3js.org/d3.v4.min.js"></script> <script> var width = 400; var height = 400; var dataset = [30,10,43,55,13]; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); var pie=d3.pie(); var piedata=pie(dataset); var outerRadius=150; var innerRadius=0; var arc=d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); var color = d3.schemeCategory10; var arcs=svg.selectAll("g") .data(piedata) .enter() .append("g") .attr("transform","translate("+ (width/2) +","+ (width/2) +")"); arcs.append("path") .attr("fill",function(d,i){ return color[i]; //to fill color }) .attr("d",function(d){ return arc(d); }); arcs.append("text") .attr("transform",function(d){ return "translate("+arc.centroid(d)+")"; }) .attr("text-anchor","middle") .text(function(d){ return d.data; }); </script> </body> </html>。

小提琴：https://jsfiddle.net/qaeed/hbxqsxjp/1/

timeout

$('.add_discount_plus_minus').on('click', function () {
  if($(this).text() === "+" ) {
    $(this).text("-");
    $('.club_registration_plus_minus').text("+");
    $('.settings_plus_minus').text("+");
    $('.add_discount_one_line_description').hide();
    $('.show_hide_add_discount_panel').slideDown();
  } else {
    $(this).text("+");
    /*$(this).css('font-size' , '20px');*/
    $('.show_hide_add_discount_panel').slideUp();
        setTimeout(function(){
     $('.add_discount_one_line_description').show();
    }, 1000);
  }
})

.add_discount_plus_minus {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-100%);
  font-size: 20px;
}

.show_hide_add_discount_panel {
  display: none;
}

.set_padding_0 {
  padding: 0 !important;
}

.set_margin_0 {
  margin: 0 !important;
}

Bootstrap：面板中的Slideup / Slidedown或Accordion

1 个答案: