Question

我有4个“更多信息”下拉按钮，单击它们可显示更多信息。我希望每个人自己打开/关闭，而其他人不打开/关闭。

我已经创建了一些有效的jquery代码，但是我看到的使其对每个按钮都起作用的唯一方法是对每个ID重复该操作。我敢肯定有很多烘干机可以完成它。

$(document).ready(function() {
  var moreBtnWrapperEl = $('.more-benefits-btn-wrapper');

  $(moreBtnWrapperEl).click(function() {
    var extraInfoText = $('#extra1-text').text();

    var i = $("i", this);
    $('.showFurther').slideToggle();

    if (extraInfoText === "More info" ? $(this).find('#extra1-text').text('Show less') : $(this).find('#extra1-text').text('More info'));

    i.toggleClass('fa-chevron-up');
    $(this).append(i);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showFurther" style="display: none;">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span id="extra1-text">More info</span>
  <span class="btn-icon">
   <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

Answer 1

要解决此问题，并保持代码“ DRY”（代表“不要重复自己”），则可以使用DOM遍历。

jQuery提供了许多查找相关元素的方法。在您的情况下，您可以使用click事件处理程序中的.more-benefits-btn-wrapper关键字来获取对单击的this元素的引用，然后使用find()和prev()来获取相关元素。试试这个：

$(document).ready(function() {
  $('.more-benefits-btn-wrapper').click(function() {
    var $wrapper = $(this);        
    $wrapper.prev('.showFurther').slideToggle();        
    $wrapper.find('.extra-text').text(function(i, t) {
      return t == 'More info' ? 'Show less' : 'More info';
    }); 
    $wrapper.find('i').toggleClass('fa-chevron-up');
  });
});

.showFurther {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showFurther">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span class="extra-text">More info</span>
  <span class="btn-icon">
    <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

<div class="showFurther">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span class="extra-text">More info</span>
  <span class="btn-icon">
    <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

<div class="showFurther">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span class="extra-text">More info</span>
  <span class="btn-icon">
    <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

Answer 2

您可以使用toggleClass来显示或隐藏容器中的额外内容。您甚至可以使用More info CSS属性来更改Show less或content跨度的文本。像这样：

$(document).ready(function(){
  $('.more-benefits-btn-wrapper').click(function(){
    $(this).toggleClass('more');
  })
});

.more-benefits-btn-wrapper {
  display: block;
  width: 200px;
  padding-bottom: 10px;
}

.more-info-span::after {
  content: 'More info...';
  display: inline-block;
  color: #00f;
  padding-left: 5px;
}

.more-benefits-btn-wrapper.more .more-info-span::after {
  content: 'Show less';
}

.content-span {
  display: none;
}

.more-benefits-btn-wrapper.more .content-span {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="more-benefits-btn-wrapper">
      <span class="more-info-span">Content title 1</span>
      <span class="btn-icon">
         <i class="fal fa-chevron-down">&nbsp;</i>
      </span>
      <span class="content-span">Lorem ipsum dolor sit amet</span>
</div>
<div class="more-benefits-btn-wrapper">
      <span class="more-info-span">Content title 2</span>
      <span class="btn-icon">
         <i class="fal fa-chevron-down">&nbsp;</i>
      </span>
      <span class="content-span">Lorem ipsum dolor sit amet</span>
</div>
<div class="more-benefits-btn-wrapper">
      <span class="more-info-span">Content title 3</span>
      <span class="btn-icon">
         <i class="fal fa-chevron-down">&nbsp;</i>
      </span>
      <span class="content-span">Lorem ipsum dolor sit amet</span>
</div>

Answer 3

如果用一个元素包装show按钮和btn好处，那就是导航到父对象，然后找到唯一可用的show元素。

$records3 = array();
while ($row3 = $result3->fetch_assoc()) {
    $records3[] =
        array('tags' =>
                  array(
                      'name' => $row3['name'],
                      'cssanimate' => $row3['cssanimate'],
                      'source' => json_decode($row3['source'])
                  )
        );
}

<div>
    <div class="showFurther" style="display: none;">
        <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
    </div>
    <div class="more-benefits-btn-wrapper">
        <span id="extra1-text">More info</span>
        <span class="btn-icon">
            <i class="fal fa-chevron-down">&nbsp;</i>
        </span>
    </div>
</div>

打开单个下拉菜单。简化代码

3 个答案: