Question

我有以下按钮：

<a href="#" class="see-more">See more <i class="fa fa-chevron-right"></i></a>

单击时，它将切换显示/隐藏效果的div。得到那部分工作正常。但是，我意识到我需要在多个按钮上使用它。我相信我需要重构我当前的代码才能成为一个函数，但我不太确定从哪里开始。

这就是我的开始：

// Slide toggle content
$(".see-more").click(function(e){
  e.preventDefault();

  $(".show-more").slideToggle('slow');

  if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
    $(this).html('See more <i class="fa fa-chevron-right"></i>');
  } else {
     $(this).html('See less <i class="fa fa-chevron-right"></i>');
  }
});

我的第一次尝试并没有带来太多好运

var seeMore = $('.see-more');

function showHide() {

    this.preventDefault();

    $(".show-more").slideToggle('slow');

    if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
      $(this).html('See more <i class="fa fa-chevron-right"></i>');
    } else {
      $(this).html('See less <i class="fa fa-chevron-right"></i>');
    }
}

seeMore.click(showHide);

编辑：添加更多代码以供参考，了解其工作原理（或应该如何工作）

    <!-- Agenda Module -->
            <div class="row module">
              <div class="small-12 columns">
                <div class="radius bordered">
                  <img src="path-to-image" alt="">
                  <div class="module-content">
                    <h2>Agenda</h2>
                    <ul class="no-bullet agenda-list">
                      <li class="agenda-date">Friday 11th September</li>
                      <li><span class="agenda-time">19.00</span>Welcome Party</li>
                    </ul>
                    <ul class="no-bullet agenda-list">
                      <li class="agenda-date">Saturday 12th September</li>
                      <li><span class="agenda-time">09.45</span>Brunch</li>
                      <div class="show-more agenda-show">
                      <li><span class="agenda-time">10.10</span>Meet the players</li>
                      <li><span class="agenda-time">10.30</span>Driving range and puttin tuition</li>
                      <li><span class="agenda-time">11.30</span>Tee-Off</li>
                      <li><span class="agenda-time">13.15</span>Lunch at the Club house</li>
                      <li><span class="agenda-time">17.00</span>End of play</li>
                      <li><span class="agenda-time">19.30</span>Drinks reception</li>
                      <li><span class="agenda-time">21.30</span>Guest speaker</li>
                      </div>
                    </ul>
                  </div>
                  <a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a>
                </div>
              </div>
            </div>
            <!-- END Agenda Module -->

其他示例（在此示例中，我将添加更多隐藏/显示的行 - 当前不在我的代码中，添加以供参考）

<li>
                <div class="radius bordered">
                  <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{ab3c73da-3765-4fc5-abac-b2a9db4db779}_mod-banner-contact.png" alt="">
                  <div class="module-content">
                    <h2>Get in touch</h2>
                    <div class="row mar-bot-15">
                      <div class="small-12 columns">
                        <p>Contact us to find out more about this or any other events that Vodafone organise:</p>
                      </div>
                    </div>
                    <div class="row collapse mar-bot-15">
                      <div class="small-3 columns text-center">
                        <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{76cda4ed-0939-4509-bda4-10fa7307a2cf}_icn-mail.png" alt="" />
                      </div>
                      <div class="small-9 columns">
                        <p><strong>events@vodafone.co.uk</strong></p>
                      </div>
                    </div>
                    <div class="row collapse mar-bot-15">
                      <div class="small-3 columns text-center">
                        <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{b8c7c4b3-9ab4-4b86-add3-c0c5b936ae41}_icn-phone.png" alt="">
                      </div>
                      <div class="small-9 columns">
                        <p><strong>+44 (0)1635 33251</strong></p>
                      </div>
                    </div>
                  </div>

                  <div class="show-more">
                    <!-- hide / show content here-->
                  </div>
                  <a href="#" class="see-more">See more <i class="fa fa-chevron-right"></i></a>
                </div>
              </li>

我可以看到其中一个答案如何在这个例子中起作用。我将尝试重构原始HTML ...议程模块与其他模块略有不同。＆＃34;显示更多＆gt;＆＃34;链接只会在移动设备上显示该示例。

Answer 1

您可以稍微重新构建HTML，然后使用.prev()查找与所点击按钮最接近的DIV。

jsFiddle Demo

请注意，当您只有一个展开的DIV来跟踪时，SlideToggle会很有效。一旦你有多个DIV，其中任何一个都可以扩展/收缩，你应该明确指定slideUp / slideDown函数。

＆＃13;

$(".see-more").click(function(e){
  e.preventDefault();

  if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
    $(this).html('See more <i class="fa fa-chevron-right"></i>');
     $(this).prev(".show-more").slideUp('slow');
  } else {
     $(this).html('See less <i class="fa fa-chevron-right"></i>');
     $(this).prev(".show-more").slideDown('slow');
  }
});

＆＃13;

.show-more{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Agenda Module -->
<div class="row module">
	<div class="small-12 columns">
		<div class="radius bordered">
			<img src="path-to-image" alt="">
			<div class="module-content">
				<h2>Agenda</h2>
				<ul class="no-bullet agenda-list">
					<li class="agenda-date">Friday 11th September</li>
					<li><span class="agenda-time">19.00</span>Welcome Party</li>
				</ul>
				<ul class="no-bullet agenda-list">
					<li class="agenda-date">Saturday 12th September</li>
					<li><span class="agenda-time">09.45</span>Brunch</li>
					<div class="show-more agenda-show">
						<li><span class="agenda-time">10.10</span>Meet the players</li>
						<li><span class="agenda-time">10.30</span>Driving range and puttin tuition</li>
						<li><span class="agenda-time">11.30</span>Tee-Off</li>
						<li><span class="agenda-time">13.15</span>Lunch at the Club house</li>
						<li><span class="agenda-time">17.00</span>End of play</li>
						<li><span class="agenda-time">19.30</span>Drinks reception</li>
						<li><span class="agenda-time">21.30</span>Guest speaker</li>
					</div>
				<a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a>
				</ul>
				<ul class="no-bullet agenda-list">
					<li class="agenda-date">Sunday 13th September</li>
					<li><span class="agenda-time">08.30</span>Breakfast</li>
					<div class="show-more agenda-show">
						<li><span class="agenda-time">10.30</span>Meet at Lobby for Bus</li>
						<li><span class="agenda-time">11.00</span>Church service</li>
						<li><span class="agenda-time">12.30</span>Bus leaves church</li>
						<li><span class="agenda-time">13.15</span>Lunch at the Club house</li>
						<li><span class="agenda-time">17.00</span>Dinner at the Club house</li>
						<li><span class="agenda-time">19.00</span>Free Evening</li>
					</div>
				<a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END Agenda Module -->

＆＃13;

Answer 2

我认为您不需要将代码重构为函数。

您仍然可以使用：

$(".see-more").on('click', function(e){
  e.preventDefault();

  if($(this).hasClass(".show-more")) {
    $(this).slideToggle('slow');
  }

  if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
    $(this).html('See more <i class="fa fa-chevron-right"></i>');
  } else {
    $(this).html('See less <i class="fa fa-chevron-right"></i>');
  }
});

显示隐藏功能

2 个答案: