我有多个 Div 容器,每个容器都有一个列表。
列表项的前五个结果应该是可见的,下一个列表项应该在滚动中可见。
当用户点击“显示更多”时,滚动条将被禁用,所有列表项将在没有滚动条的情况下可见。
如果列表项的结果不少于四个,则显示更多链接将被隐藏。
我们存档的内容与一个容器列表项相同,但我想对所有 div 容器列表项使用相同的脚本。
HTML:
<h1>First part</h1>
<div class="row">
<div class="col-md-12">
<a href="#demo" data-toggle="collapse"><span class="glyphicon ecm-caret-down">Arrow</span></a>
<span class="fb_options_head">Heading 1</span>
<!--Hiding Div Start-->
<div id="demo" class="collapse in">
<ul class="nav_accordian">
<li>One
<ul>
<li>on 1.1</li>
<li>on 1.2</li>
<li>on 1.3</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<p class="showMore">Show More</p>
</div>
<!--Hiding Div End-->
</div>
</div>
<h1>Second part</h1>
<div class="row">
<div class="col-md-12">
<a href="#demo1" data-toggle="collapse"><span class="glyphicon ecm-caret-down">Arrow</span></a>
<span class="fb_options_head">Heading 2</span>
<!--Hiding Div Start-->
<div id="demo1" class="collapse in">
<ul class="nav_accordian">
<li>One
<ul>
<li>on 1.1</li>
<li>on 1.2</li>
<li>on 1.3</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<p class="showMore">Show More</p>
</div>
<!--Hiding Div End-->
</div>
</div>
JS:
$('.nav_accordian').each(function() {
var max = 4
if ($(this).find('> li').length > max) {
$(".showMore").show();
} else {
$(".showMore").hide();
}
$('.showMore').click(function() {
alert("call");
$('.nav_accordian').toggleClass("fullAuto");
$(".showMore").text(function(_, txt) {
return txt == "Show More" ? "Less More" : "Show More";
})
});
});
CSS:
.nav_accordian {
max-height: 160px;
overflow-y: auto;
width: 400px;
}
.fullAuto {
max-height: 100%;
}
最佳答案
所做的更改
► 将 click
函数移出循环
► 在 click
函数中使用 $(this)
而不是 $(".showMore")
$('.nav_accordian').each(function() {
var max = 4
if ($(this).find('> li').length > max) {
$(".showMore").show();
} else {
$(".showMore").hide();
}
});
$('.showMore').click(function() {
alert("call");
$(this).prev().toggleClass("fullAuto");
$(this).text(function(_, txt) {
return txt == "Show More" ? "Less More" : "Show More";
})
});
关于javascript - 如何在没有冲突的情况下为多个 div 容器归档相同的 jquery 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36279806/