如果我的问题标题不太清楚,我想道歉,所以我会在这里用例子来解释。
我有这个网站http://color.ninski.ro我正在尝试构建一个菜单。
我需要此菜单中的两件事:
- 当我点击一个元素时,它的位置会与第一个元素的位置切换(感谢该网站的用户 Khawer Zeshan 解决了这个问题)。
- 在一个元素成为第一个元素后,我需要它增加其宽度和高度,而不插入其余元素,这样它就可以显示“隐藏文本”,但是如果您单击另一个元素,它会与首先,它返回到原始 CSS。
这是菜单列表:
<ul class="unstyled" id="java">
<li id="b1"><div><a href="">Picturi Interior</a></div></li>
<li id="b2"><div><a href="">Modele Propuse</a></div></li>
<li id="b3"><div><a href="">Design Interior</a></div></li>
<li id="b4"><div><a href="">Web Design</a></div></li>
<li id="b5"><div><a href="">Obiecte Decorative</a></div></li>
</ul>
这是切换脚本,如果它对您有帮助的话:
$.fn.exchangePositionWith = function(selector) {
var other = $(selector);
this.after(other.clone());
other.after(this).remove();
};
$(document.body).on('click', 'ul#java li' ,function(){
var pos = $(this).closest('li').index();
$("ul#java li:eq("+pos+")").exchangePositionWith("ul#java li:eq(0)");
});
这是列表的原始 CSS:
#java li{
display:inline-block;
width:149px;
height:67px;
margin-left:13px;
padding-top:40px;
text-align:center;
}
如果您认为我的问题或我的解释不完整,请随时询问我。
最佳答案
在测试以下内容时,我删除了 div 和 a 标签;不知道他们为什么在那里。特别是,如果 a 标签不是链接,我不会使用它们,如果需要,只需将 li 样式设置为看起来像链接即可。
无论如何,增加字体大小或粗细不会影响其他元素。也无需存储以前的值,因为将这些值设置为 '' 将恢复为其原始值。
$.fn.exchangePositionWith = function(selector) {
var other = $(selector);
$(other).css('fontSize','');
this.after(other.clone());
other.after(this).remove();
$(this).css('fontSize','large');
};
如果您单击第一个项目,现在会出现问题,因为它的字体大小会发生变化。这可以在代码中通过检查单击项目的索引来解释。
如果您特别想增加容器元素的高度和宽度,那么您需要使用定位将它们带出正常流程,以便它们可以重叠,或者保留 DIV 并更改它们的边距和/或填充与我上面的代码类似(可能使用parent())。 (我假设您打算添加边框或背景,否则不需要增加高度/宽度。)
以下内容将忽略第一个项目的点击。如果您希望通过单击将项目放回其原始位置,则需要进行修改。
$('body').on('click', 'ul#java li' ,function (){
var pos = $(this).closest('li').index();
if (pos > 0) {
$("ul#java li:eq("+pos+")").exchangePositionWith("ul#java li:eq(0)");
}
});
关于javascript - 如何在交换后将列表元素返回到其原始样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17266096/