javascript - 如何在交换后将列表元素返回到其原始样式

Question

如果我的问题标题不太清楚，我想道歉，所以我会在这里用例子来解释。

我有这个网站http://color.ninski.ro我正在尝试构建一个菜单。

我需要此菜单中的两件事:

1. 当我点击一个元素时，它的位置会与第一个元素的位置切换(感谢该网站的用户 Khawer Zeshan 解决了这个问题)。
2. 在一个元素成为第一个元素后，我需要它增加其宽度和高度，而不插入其余元素，这样它就可以显示“隐藏文本”，但是如果您单击另一个元素，它会与首先，它返回到原始 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;
}

如果您认为我的问题或我的解释不完整，请随时询问我。

Answer 1

在测试以下内容时，我删除了 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)");
    }
});