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

How to return a list element to its original styles after a swap

本文关键字：返回 原始 样式 列表元素 交换      更新时间：2023-09-26

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

我有这个网站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;
}

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

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

您可以尝试：

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>';

现在使用jQuery的原生$('wherever').html(iniHTML);。换句话说，存储<ul>的初始状态，并将jQuery .css()对象存储在另一个变量中，如：

var iniCSS = {
  width: '300px',
  height: '25px',
  color: '#000',
}
$('wherever').css(iniCSS);
相关文章：