如何在交換后將列表元素返回到其原始樣式

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

你可以嘗試：

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