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

如果我对问题的标题不太清楚，我想道歉，所以我将在这里举例说明

我有这个网站，我正试图建立一个菜单

我需要这菜单上的两样东西：

当我点击一个元素时，它的位置会和第一个元素的位置切换（这个问题是由于这个网站的用户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>

这是列表的原始CSS：

#java li{
 display:inline-block;
 width:149px;
 height:67px;
 margin-left:13px;
 padding-top:40px;
 text-align:center;
}

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

您可以尝试：

var iniHTML = '<ul class="unstyled" id="java">';
iniHTML += '<li id="b1"><div><a href="">Picturi Interior</a></div></li>';
iniHTML += '<li id="b2"><div><a href="">Modele Propuse</a></div></li>';
iniHTML += '<li id="b3"><div><a href="">Design Interior</a></div></li>';
iniHTML += '<li id="b4"><div><a href="">Web Design</a></div></li>';
iniHTML += '<li id="b5"><div><a href="">Obiecte Decorative</a></div></li>';
iniHTML += '</ul>';

---

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

---

当提到2时，我想我们应该假设您指的是除

之外的另一个元素。感谢Jason的快速回复

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    $(other).css('fontSize','');
    this.after(other.clone());
    other.after(this).remove();
    $(this).css('fontSize','large');
};

$('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)");
    }
});