javascript - 如何在没有冲突的情况下为多个 div 容器归档相同的 jquery 操作

Question

我有多个 Div 容器，每个容器都有一个列表。

列表项的前五个结果应该是可见的，下一个列表项应该在滚动中可见。

当用户点击“显示更多”时，滚动条将被禁用，所有列表项将在没有滚动条的情况下可见。

如果列表项的结果不少于四个，则显示更多链接将被隐藏。

我们存档的内容与一个容器列表项相同，但我想对所有 div 容器列表项使用相同的脚本。

DEMO

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%;
}

Answer 1

所做的更改

► 将 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";
  })
});

Demo Fiddle