如何根据数据值设置显示/隐藏额外的div？

2 回答

• 0

  在这里，我绕过您的代码，只提供实际问题的最简单答案 . 我会留给你在你的代码中工作 .

  注意如果您选择不使用课程，则可以执行 .toggle(true); 而不是 .toggleClass('hidden', true);

  我用了一个类来简化原始的HTML .

  $('.sectorpage-strengths').on('click', '.view-all-sectors-btn', function(event) {
    var sect = $(event.delegateTarget);
    var sectCount = sect.data('desktop');
    var strengths = sect.find('.sectorpage-strengths-list').find('.marg1');
    strengths.toggleClass('hidden', false);
    var showCount = $(this).hasClass('less') ? strengths.length - 1 : sectCount - 1;
    strengths.slice(0, showCount).toggleClass('hidden', true);
    $(this).toggleClass('hidden', true);
    $(this).siblings('.view-all-sectors-btn').toggleClass('hidden', false);
  });
  

  .sectorpage-strengths .marg1 {
    border: solid lime 1px;
  }
  
  .yellow-container {
    height: 140px;
    background-color: #FFFFE0;
  }
  
  .hidden {
    display: none;
  }
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <section class="sectorpage-strengths" data-desktop="1">
    <div class="container">
      <div class="row">
        <h2>heading main1</h2>
      </div>
      <div class="row  sectorpage-strengths-list">
        <div class=" marg1">
          <div class="sectorpage-strengths-list-item">
            <div class="main-container">
              <div class="yellow-container">
                <h3>heading1 1</h3>
              </div>
            </div>
            <div class="text-description">
              text
            </div>
            <div class="slant"></div>
          </div>
        </div>
        <div class=" marg1 hidden">
          <div class="sectorpage-strengths-list-item">
            <div class="main-container">
              <div class="yellow-container">
                <h3>heading1 2</h3>
              </div>
            </div>
            <div class="text-description">
              text
            </div>
            <div class="slant"></div>
          </div>
        </div>
      </div>
      <div class="row view-all-sectors-btn-container">
        <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
        <span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
      </div>
    </div>
  </section>
  <section class="sectorpage-strengths" data-desktop="1">
    <div class="container">
      <div class="row">
        <h2>heading main2</h2>
      </div>
      <div class="row  sectorpage-strengths-list">
        <div class=" marg1">
          <div class="sectorpage-strengths-list-item">
            <div class="main-container">
              <div class="yellow-container">
                <h3>heading2 1</h3>
              </div>
            </div>
            <div class="text-description">
              text
            </div>
            <div class="slant"></div>
          </div>
        </div>
        <div class=" marg1 hidden">
          <div class="sectorpage-strengths-list-item">
            <div class="main-container">
              <div class="yellow-container">
                <h3>heading2 2</h3>
              </div>
            </div>
            <div class="text-description">
              text
            </div>
            <div class="slant"></div>
          </div>
        </div>
      </div>
      <div class="row view-all-sectors-btn-container">
        <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
        <span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
      </div>
    </div>
  </section>
  

  回复于 2024-05-15T09:40:23+08:00
• 1

  您正在聆听代码中的所有“查看更多”按钮 . 所以它引起了问题 .

  Update code

  代码应该处理单个容器 . 文件更改是，

  _checkElemnt = function($element) {
  var _vp = 0;//INF.global.device.viewportN;
  
  if (_vp === 0) {
    var count = $element.data('desktop');
    $element.find('.marg1').hide();
    if ($element.find('.marg1').length >= (count + 1)) {
      $element.find('.view-all-sectors-btn-container').show();
    } else {
      $element.find('.view-all-sectors-btn-container').hide();
    }
    _elements = count;
  } else if (_vp === 1) {
    $element.find('.marg1:nth-child(n+5)').hide();
    if ($element.find('.marg1').length > 4) {
      $element.find('.view-all-sectors-btn-container').show();
    } else {
      $element.find('.view-all-sectors-btn-container').hide();
    }
    _elements = 4;
  } else {
    $element.find('.marg1:nth-child(n+4)').hide();
    _elements = 3;
  }
  
  $element.find('.marg1').slice(0,count).each(function(index, ele){
      $(ele).attr('data-display', true).show();
  });
  

  };

  和

  _bindShowMore = function(container) {
    var _showMore = $(container).find('.view-all-sectors-btn');
  _showMore.on('click', function(element) {
     var isAllVisible = $(this).closest('.sectorpage-strengths').hasClass('showLess');
    $(this).closest('.container').find('.row + .row >.marg1:not([data-display])').slideToggle();
    $(this).parents('.sectorpage-strengths').toggleClass('showLess');
    $(this).text(isAllVisible ?'view more' : 'view less');
      if(isAllVisible){
          console.log('isAllVisible', isAllVisible); // you handle some other action here if required
      }
  });
  

  };

  和

  init = function() {
  var EachView = jQuery('.sectorpage-strengths');
  EachView.each(function(index, element) {
    if (_sectorPageStrengths.length > 0) {
      _checkElemnt($(element));
      _bindShowMore(element);
      // _bindShowLess(); this behaviour handled in bindShowMore itself
      $(window).on('load', function() {
        equalHeight();
      });
    }
  });
  

  我希望这能帮到您 .

  回复于 2024-05-15T09:40:23+08:00