Question

单击我的卡标题后，其内容将以显示幻灯片jquery动画.show('slide', {direction: 'up'}, 'slow') / .hide('slide', {direction: 'up'}, 'slow'显示或隐藏。问题是在动画过程中.content-annales的宽度减小了，因此右侧的.title-annales div缺乏连续性。

以下是问题的一个示例：click here

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上复制该问题，但在这里效果很好。我使用基于引导程序的主题（对于Wordpress，为Hestia），当我从引导css文件中删除属性box-sizing: border-box;时，它的工作方式类似于jsfiddle。

Answer 1

我无法重现您提到的行为，但是有一个可能的解决方案。将width: 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>

Answer 2

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

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/

希望有帮助。

Answer 3

我终于解决了这个问题。

1。问题的可能原因

执行function foo() { console.log(answer); } // foo(); <== Would fail, `answer` isn't initialized yet let answer = 42; foo(); // Works, logs 42时，jquery-ui会为选定的div设置一个固定宽度，该宽度似乎未考虑填充（https://dev.azure.com/{organization1}/_apis/Contribution/HierarchyQuery?api-version=5.0-preview.1的{{1}}）。 看看在jquery动画过程中发生了什么：我真的不明白为什么不考虑填充，因为在我的问题中共享的jsfiddle中填充非常有效。它可以链接到.show('slide', { direction: 'up'}, 'slow')，该链接根据我的主题为所有html设置。实际上，当我禁用它时，问题就消失了。

2。我的解决方案

这很简单：我将padding: 10px封装在一个名为.content-annales的父div中，该父div除box-sizing: border-box;外没有其他样式。现在，我的动画可以显示/隐藏.content-annales，因此填充没有问题。

这是新代码：

.content-annales-toggle

display: none;

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

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

4 个答案: