Javascript 如何为多个div容器归档相同的jquery操作而不发生冲突

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

列表项的前五个结果应该可见，下一个列表项应该在滚动条上可见

当用户单击“showmore”时，滚动条将被禁用，所有列表项将在没有滚动条的情况下可见

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

我们将其归档为一个容器列表项，但我希望对所有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>

$('.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";
    })
  });

});

.nav_accordian {
  max-height: 160px;
  overflow-y: auto;
  width: 400px;
}

.fullAuto {
  max-height: 100%;
}

CSS:

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

$('.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";
    })
  });

});

.nav_accordian {
  max-height: 160px;
  overflow-y: auto;
  width: 400px;
}

.fullAuto {
  max-height: 100%;
}

---

所做的更改

► 将

单击

功能移出循环

► 使用

$（此）

而不是

$（“.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";
  })
});