当元素可见时替换css

-3

我有一个右箭头，单击时显示隐藏的左箭头。在两个箭头之间有文本居中，所以当两个箭头都可见时，居中文本上的边距会发生变化，因此我删除了#completeList上的css样式，并试图使用JQuery添加css。下面是我想要的代码：当元素可见时替换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>

我遇到的问题是44％的保证金左是不会改变的32％保证金左$（'＃leftArrow'）可见时。

是我用jQuery的一个可行的解决方案，或者我应该寻找另一种方式？

来源

2015-09-10 TheHound

什么是你的问题？ – Chrillewoodz

@Chrillewoodz我很确定他们问的是如何将margin从'44％'改成'32％'，当'＃leftArrow'是'：visible'时 –

你想要什么，呵呵..？ – divy3993

您可以尝试绝对定位箭头。这会从周围元素的上下文中移除箭头，并允许它们相对于父项<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; 
}

来源

2015-09-10 19:47:29 Jackson

这个工程！感谢您的出色解决方案。 – TheHound

你的拼写#completeList在你的陈述中都没有相同。

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

试试这个：

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

来源

2015-09-10 20:00:05

这是一个错误的职位。感谢您指出它 – TheHound

当元素可见时替换css

回答

相关问题