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

Question

I want to apologize if I wasn't very clear in the question's title, so I will explain it here with examples.

I have this website http://color.ninski.ro where I'm trying to build a menu.

I need two things from this menu:

1. When I click an element, it's position switches with the first element position (this problem was solved thanks to Khawer Zeshan a user from this website).
2. After an element becomes the first, I need it to increase its width and height without pushing the rest of the elements, so it can display a "hidden text", but if you click another element, it switches it's position with the first and it returns to the original CSS.

This is the menu list:

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

This is the switching script if it helps you :

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

This is the original CSS for the list:

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

If you think my question or my explanation is incomplete, please feel free to ask me.

Answer 1

You could try:

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

Now use jQuery's native $('wherever').html(iniHTML); . In other words, store the initial state of your <ul> and store a jQuery .css() Object in another variable, like:

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

Answer 2

I removed the divs and a-tags when tested the following; not sure why they are there. In particular, I wouldn't use a-tags if they are not links, just style the li to look like a link if this is required.

Anyway, increasing the font-size or weight doesn't push the other elements. There is also no need to store the previous values, as setting these to '' will revert to their original values.

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

There is now an issue if you click the first item, as its font-size will change. This could be accounted for in the code by checking the index of the clicked item.

If you specifically want to increase the height and width of the container element then you need to use positioning to take them out of the normal flow, so that they can overlap, or keep the DIVs and alter their margins and/or padding in a similar way to my code above (using parent(), probably). (I assume you to intend to add borders or a background, otherwise the height/width increase wouldn't be needed.)

The following will ignore a click on the first item. You'll need to modify if you want this click to put the item back in its original position.

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