Question

我有一个右箭头，点击时会显示隐藏的左箭头。两个箭头之间有文本居中，因此当两个箭头都可见时，居中文本的边距会发生变化，因此我删除了#completeList上的css样式，并尝试使用JQuery添加css。这是我正在尝试的代码：

$('#completeList').css('margin-left', '44%');
if ($('#leftArrow').is(':visible')) {
$('#completeList').css('margin-left', '32%');
}

缩短的html是：

<p><img id="leftArrow"><span id="completeList"><img style="float: right" id="rightArrow"></p>

我遇到的问题是当$（'＃leftArrow'）可见时，剩余44％的保证金没有变为32％保证金。

jQuery是否使用了可行的解决方案，还是我应该寻找其他方式？

Answer 1

您可以尝试绝对定位箭头。这将从周围元素的上下文中删除箭头，并允许它们相对于父<p>定位，而不会影响相邻文本。

p {
    position: relative;
    padding: 0 20px; /* Leave enough space for an arrow on each side*/
}
#leftArrow,
#rightArrow {
    position: absolute; /* position the arrows absolutely */
}
#leftArrow {
    left: 0;
}
#rightArrow { 
    right: 0;
}

Answer 2

你的两个陈述中都没有#completeList拼写相同的内容。

$('#completeList').css('margin-left', '44%');
if ($('#leftArrow').is(':visible')) {
$('#completList').css('margin-left', '32%');
}

试试这个：

$('#completeList').css('margin-left', '32%');

元素可见时替换css

2 个答案: