jQuery在悬停时计算宽度并更改兄弟节点

Question

目标

我希望我的所有列表项在页面宽度上水平运行，所有li的总宽度等于100％。然后，我希望有一个等于45％的活动li，并且脚本计算一旦触发活动后其他li的宽度将计算什么，以便将总数保持在100％限制内保持它们全部水平运行。

我有一些代码，我正试图解决这个问题。

到目前为止......

我的代码 - 正如您将看到的 - 将改变悬停元素的宽度并调整子代。但是，它仅调整hoverout上的孩子。我无法弄清楚如何干净利落地完成这项工作。我觉得我的做法很混乱......

帮助表示感谢。请参阅下面的代码和工作示例。

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

所以，我已经更新了你的代码，所以它现在正在运行。请看一下：http://codepen.io/anon/pen/XdqoaG

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在悬停项目上分配42% width后，请输入以下代码。

这是因为 - 首先所有物品的宽度都相同 - 然后当你增加一个尺寸时 - 其余部分仍然是原件。

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

您可以将hard-coded 6 替换为$li.length减一。

Answer 3

正如我在评论中所说，这里是js，简化。

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

还有一点css

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

Answer 4

虽然这没有回答这个问题，但你知道你可以用css实现这个吗？

http://jsfiddle.net/4watyjyp/

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