3

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

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

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

4

2 回答 2

0

在测试以下内容时，我删除了 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)");
    }
});
于 2013-06-23T23:23:10.300 回答
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);
于 2013-06-23T23:11:32.133 回答