Question

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

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

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

Answer 1

你可以尝试：

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

Answer 2

我在测试以下内容时删除了div和a-tags;不知道为什么他们在那里。特别是，如果它们不是链接，我不会使用a-tags，只需将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 个答案: