播放演示幻灯片动画时，div的宽度减小

单击我的卡标题时, 其内容将与显示幻灯片jquery动画一起显示或隐藏。show(‘slide’, {direction：’up’}, ‘slow’)/ .hide(‘slide’, {direction：’up问题是动画期间.content-annales的宽度减小了, 因此右侧的.title-annales div缺乏连续性。

这是问题的一个示例：单击此处

jQuery(".title-annales").on("click", function() {
  var element = jQuery(this);
  if (jQuery(this).next().css('display') === 'none') {
    element.css('border-radius', '20px 20px 0px 0px');
    jQuery(this).next().show('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
    });

  } else {
    jQuery(this).next().hide('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.css('border-radius', '20px');
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
    });
  }
});

<div class="card-annales">
  <div class="title-annales">
    <span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
    <h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
  </div>
  <div class="content-annales">
    [...]
  </div>
</div>

编辑：我试图在jsfiddle上复制该问题, 但它在这里工作完美。我使用基于引导程序的主题(Hestia for WordPress), 当我从引导程序CSS文件中删除属性box-sizing：border-box;时, 它的工作原理类似于jsfiddle。

#1

我无法重现你提到的行为, 但是有一个可能的解决方案。添加宽度：calc(100％-20px); .content-annales。

jQuery(".title-annales").on("click", function() {
  var element = jQuery(this);
  if (jQuery(this).next().css('display') === 'none') {
    element.css('border-radius', '20px 20px 0px 0px');
    jQuery(this).next().show('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
    });

  } else {
    jQuery(this).next().hide('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.css('border-radius', '20px');
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
    });
  }
});

.card-annales {
  display: block;
  margin-bottom: 20px;
}

.title-annales {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px 20px;
  background-color: #012f51;
  color: #ff6501;
  font-size: 1.7em;
  border: gray 1px solid;
  padding: 10px 30px;
  cursor: pointer;
}

.content-annales {
  border-left: gray 1px solid;
  border-right: gray 1px solid;
  border-bottom: gray 1px solid;
  padding: 10px;
  border-radius: 0px 0px 20px 20px;
  display: none;
  width: calc(100% - 20px); /* added */
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
  <div class="title-annales">
    <span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
    <h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
  </div>
  <div class="content-annales">
    [...]
  </div>
</div>

#2

我终于解决了这个问题。

1.问题的可能原因

当执行.show(‘slide’, {direction：’up’}, ‘slow’)时, jquery-ui会为选定的div设置一个固定宽度, 这似乎没有考虑填充(padding：.content的10px) -annales)。查看在jquery动画期间发生了什么：

我真的不明白为什么不考虑填充, 因为它在我的问题中共享的jsfiddle中完美地工作了。它可以链接到框大小：border-box;这是根据我的主题为所有html设置的。实际上, 当我禁用它时, 问题就消失了。

2.我的解决方案

这很简单：我将.content-annales封装在名为.content-annales-toggle的父div中, 该div除了display：none;外没有其他样式。现在, 我的动画显示/隐藏了.content-annales-toggle, 因此填充没有问题。

这是新代码：

jQuery(".title-annales").on("click", function() {
  var element = jQuery(this);
  if (jQuery(this).next().css('display') === 'none') {
    element.css('border-radius', '20px 20px 0px 0px');
    jQuery(this).next().show('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
    });

  } else {
    jQuery(this).next().hide('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.css('border-radius', '20px');
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
    });
  }
});

<style>
.card-annales {
    display: block;
    margin-bottom: 20px;
}
.title-annales {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px 20px;
    background-color: #012f51;
    color: #ff6501;
    font-size: 1.7em;
    border: gray 1px solid;
    padding: 10px 30px;
    cursor: pointer;
}
.content-annales-toggle {
display: none; /* edited */
}
.content-annales {
    border-left: gray 1px solid;
    border-right: gray 1px solid;
    border-bottom: gray 1px solid;
    padding: 10px;
    border-radius: 0px 0px 20px 20px;
    display: block; /* edited */

}
.float-right {
float: right;
}
.float-left {
float: left;
}
</style>
 <div class="card-annales">
  <div class="title-annales">
    <span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
    <h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
  </div>
  <div class="content-annales-toggle">
      <div class="content-annales">
        [...]
      </div>
  </div>
</div>

#3

我认为这与内容呈现时的溢出有关。考虑以下：

https://jsfiddle.net/Twisty/zqk9johc/

的JavaScript

jQuery(".title-annales").on("click", function() {
  var element = jQuery(this);
  var nextEl = element.next();
  var parentEl = element.parent();
  var iconUp = $("<i>", {
    class: "fas fa-chevron-circle-up"
  });
  var iconDown = $("<i>", {
    class: "fas fa-chevron-circle-up"
  });
  if (nextEl.css('display') === 'none') {
    nextEl.show('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.css('border-radius', '20px 20px 0px 0px');
      jQuery('.span-msg-mediadroit-annale', element).html(iconUp);
    });
  } else {
    nextEl.hide('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.css('border-radius', '20px');
      jQuery('.span-msg-mediadroit-annale', element).html(iconDown);
    });
  }
});

代码没有什么大不相同, 但是在Fiddle中, 我添加了5段。显示内容时, 当内容超出当前窗口高度时, 浏览器将呈现滚动条。呈现的滚动条似乎可以重排文档的内容。

如果添加一些CSS：

html {
  overflow-y: scroll; 
}

滚动条已经渲染, 不需要重排。

示例：https：//jsfiddle.net/Twisty/zqk9johc/5/

希望能有所帮助。

#4

请从” content-annales”类中删除填充, 并将内部内容包装在div上, 并在其上添加填充。

请检查以下代码：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
  <div class="title-annales">
    <span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
    <h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
  </div>
  <div class="content-annales">
    <div class="inner-section">
        [...]
    </div>
  </div>
</div>

<style>

.card-annales {
  display: block;
  margin-bottom: 20px;
}

.title-annales {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px 20px;
  background-color: #012f51;
  color: #ff6501;
  font-size: 1.7em;
  border: gray 1px solid;
  padding: 10px 30px;
  cursor: pointer;
}

.content-annales {
  border-left: gray 1px solid;
  border-right: gray 1px solid;
  border-bottom: gray 1px solid;
  border-radius: 0px 0px 20px 20px;
  display: none;
}

.inner-section {
  padding: 10px;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

</style>

<script>

    jQuery(".title-annales").on("click", function() {
      var element = jQuery(this);
      if (jQuery(this).next().css('display') === 'none') {
        element.css('border-radius', '20px 20px 0px 0px');
        jQuery(this).next().show('slide', {
          direction: 'up'
        }, 'slow', function() {
          element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
        });

      } else {
        jQuery(this).next().hide('slide', {
          direction: 'up'
        }, 'slow', function() {
          element.css('border-radius', '20px');
          element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
        });
      }
    });
</script>