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

jQuery calculate widths and change siblings on hover

本文关键字：悬停 计算 jQuery      更新时间：2023-09-26

目标

我希望我的所有列表项在页面宽度上水平运行，所有li的总宽度等于100%。然后，我希望有一个等于45%的活动li，并且脚本计算一旦触发活动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();
});

实例

正如我在评论中所说，这里是经过简化的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%;
    };

在悬停项上分配42% width之后，放入以下代码。

这是因为，首先所有的物品都有相同的宽度，然后当你增加其中一个的尺寸时，其余的都保持原样。

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

您可以将hard-coded6替换为$li.length减去1。

虽然这并不能回答问题，但你知道用css可以实现这一点吗？

http://jsfiddle.net/4watyjyp/

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

所以，我已经更新了您的代码，所以它现在可以工作了。请看一下：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>

相关文章：