jQuery计算宽度并在悬停时更改同级

Question

The Goal

I want all my list items running horizontally across the page width the total width of all the li equaling 100%. I then want there to be one active li which is equal to 45% and for the script to calculate what the other li's width would compute once the active is triggered in order to keep the total to within the 100% limit to keep them all running horizontal.

I have some code that I'm trying to work it out with.

So far...

My code — as you will see — will change the width of the hovered element and adjust the children. However it only adjusts the children on hoverout . I can't quite work out how to make this work cleanly. I feel my approach is messy...

Help appreciated. See below for code and working example.

HTML :

<div class="tours">
    <ul class="tours-List">
        <li>
            <h2>Tour Item</h2>
            <a href="#">View more</a>
        </li>
        <li>
            <h2>Tour Item</h2>
            <a href="#">View more</a>
        </li>
        <li>
            <h2>Tour Item</h2>
            <a href="#">View more</a>
        </li>
        <li>
            <h2>Tour Item</h2>
            <a href="#">View more</a>
        </li>
        <li>
            <h2>Tour Item</h2>
            <a href="#">View more</a>
        </li>
        <li>
            <h2>Tour Item</h2>
            <a href="#">View more</a>
        </li>
        <li>
            <h2>Tour Item</h2>
            <a href="#">View more</a>
        </li>
    </ul>
</div>

jQuery:

var
$li = $('.tours li'),
$is_active = false;

function checkActive() {
    if (!$li.hasClass("is-Active")) {
        $li.css({
            "width": 100 / $li.length + "%"
        });
    } else{
        $li.css('width', 58 / ($li.length -1) + "%");
    }
}

$li.css({
    "float": "left",
    "width": 100 / $li.length + "%"
});

$li.hover(function(e){
        $is_active = true;
        $(this).addClass("is-Active");
        $(this).css('width', '42%');

}, function(){
        $is_active = false;
        $(this).removeClass("is-Active");
        checkActive();
});

Live example

Answer 1

So, I have updated your code so it is working now. Please have a look at this: http://codepen.io/anon/pen/XdqoaG

 var $li = $('.tours li'), $is_active = false; function checkActive() { if (!$li.hasClass("is-Active")) { $li.css({ "width": 100 / $li.length + "%" }); } else { $li.each(function() { if(!$(this).hasClass("is-Active")){ $(this).css('width', 58 / ($li.length -1) + "%"); } }) } } $li.css({ "float": "left", "width": 100 / $li.length + "%" }); $li.hover(function(e) { $is_active = true; $(this).addClass("is-Active"); $(this).css('width', '42%'); checkActive(); }, function() { $is_active = false; $(this).removeClass("is-Active"); checkActive(); }); 

 .tours{ &-List{ margin: 0; padding: 0; li{ list-style: none; background: { color: grey; } padding: 10em 2em 2em; box-sizing: border-box; @for $i from 1 through 7 { &:nth-of-type(#{$i}) { background-color: lighten(grey, $i * 3); } } } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tours"> <ul class="tours-List"> <li> <h2>Tour Item</h2> <a href="#">View more</a> </li> <li> <h2>Tour Item</h2> <a href="#">View more</a> </li> <li> <h2>Tour Item</h2> <a href="#">View more</a> </li> <li> <h2>Tour Item</h2> <a href="#">View more</a> </li> <li> <h2>Tour Item</h2> <a href="#">View more</a> </li> <li> <h2>Tour Item</h2> <a href="#">View more</a> </li> <li> <h2>Tour Item</h2> <a href="#">View more</a> </li> </ul> </div> 

Answer 2

Put the following code after you are assigning 42% width on the hovered item.

It's because - first all the items are getting identical width - then when you are increasing size of one - the rest remains as originals.

$li.each(function(){
            if (!$(this).hasClass("is-Active")) {
                $(this).css({
                    "width": 58 / 6 + "%"
                });
            }
        });

you can replace hard-coded 6 by $li.length minus one.

Answer 3

As I said in the comments, here is the js, simplified.

var $li = $('.tours li');
var widthPercentLeftWhenOneIsActive = 100-40; // you should use constant of course...

init();

function init(){
    $li.css({
        "float": "left",
        "width": 100 / $li.length + "%"
    });
};

$li.hover(function(e){
        $(this).css("width","");//remove inline style
        $(this).addClass("is-Active");
        //$(this).css('width', '42%'); move it to the css
        shrinkNonActiveItems();
}, function(){
        $(this).removeClass("is-Active");
        unShrinkAll();
});

function shrinkNonActiveItems(){
    $li.each(function(index, item){
        if(! $(item).hasClass("is-Active")){
            $(item).css("width", (widthPercentLeftWhenOneIsActive /     ($li.length-1))+"%" );
        }
    });
};

function unShrinkAll(){
    $li.each(function(index, item){
        $(item).css("width",100 / $li.length + "%");
    });    };

And a little bit of css

li.is-Active{
        width:40%;
    };

Answer 4

While this does not answer the question, are you aware that you can achieve this with css?

http://jsfiddle.net/4watyjyp/

ul {
  display: table;
}
li {
  display: table-cell;
}
li:hover {
  width: 45%;
}