当我的卡片标题被点击时,它的内容随着 show slide 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 上重现该问题但它在这里工作得很好。我使用基于 Bootstrap 的主题(Hestia 对于 Wordpress),当我从 Bootstrap css 文件中删除属性 box-sizing: border-box;
时,它就像在 jsfiddle 中一样工作。
最佳答案
我无法重现您提到的行为,但可以为您提供一个可能的解决方案。添加 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>
关于javascript - 放映幻灯片动画时div的宽度变小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57037216/