jQuery Button在页面的不同区域切换相同的按钮

时间：2018-10-29 18:02:55

标签： jquery twitter-bootstrap twitter-bootstrap-3

问候堆栈溢出！

我正在努力解决jQuery按钮切换问题。

我正在使用Bootstrap 3.3.7的折叠功能在页面上显示多个（大约12个）可扩展部分。收合功能非常出色。我的问题是单击按钮时，我想使用jQuery处理该按钮。该按钮应该在两行文本（“扩展故事”和“折叠故事”）之间切换，以及一个字体超赞的向上倾斜的胡萝卜，当该部分展开或折叠时，该胡萝卜会在向上和向下之间切换。

我敢于尝试，这是一种更好的方法，但这是我可以在无经验的头脑中想到的方法-每次我单击“扩展故事”按钮时，所有“扩展故事”按钮改变。

由于某种原因，我无法使每个被单击的按钮都唯一。我曾经想过，也许我可以使用wc_customer_bought_product()来定位特定的按钮实例，因为这些实例对于页面上的每个按钮都是唯一的。

最后，我只需要单击按钮即可更改其文本和上/下胡萝卜。

我知道JS Fiddle的工作方式并不完全像我以前那样，希望它足够接近以传达我的尝试。请帮助我提出一个更好的jQuery解决方案。感谢您的建议！谢谢！

我的工作大部分都是

JSFiddle

希望可以帮助说明我正在尝试做的事情和遇到的问题。

2 个答案:

答案 0 :(得分：1)

看看下面的例子是否能使您走上正轨：

演示： 

jQuery(function ($) {
  $('a.collapse-trigger').on('click', function () {
    var $this = $(this);
    
    if($($this.attr('href')).is(":visible")) {
      $($this.attr('href')).slideUp();
      $this.find('.col-txt')
        .hide()
        .siblings('.exp-txt')
        .show();
    } else {
      $($this.attr('href')).slideDown();
      $this.find('.exp-txt')
        .hide()
        .siblings('.col-txt')
        .show();
    }
  });
});
.col-txt {
 display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- First Title -->
<div class="container-wrapper container">
  <div class="row">
    <div class="col-md-12 story-content">
        <h1 class="mb-2 mt-5">Our Team</h1>
    </div>
  </div>
</div>

<!-- First Story -->
<div class="collapse" id="c11">
  <div class="container">
	  <div class="row">
		  <div class="col-md-12">
			  <!-- Nav tabs -->
			  <ul class="nav nav-tabs red text-center" role="tablist">
				  <li role="presentation" class="active float-none d-inline-block"><a href="#CFT_Staff" aria-controls="CFT_Staff" role="tab" data-toggle="tab">CFT Staff</a></li>
					<li role="presentation" class=" float-none d-inline-block"><a href="#Trustees" aria-controls="gifts" role="tab" data-toggle="tab">Trustees</a></li>
					<li role="presentation" class=" float-none d-inline-block"><a href="#Advisory_Council" aria-controls="Advisory_Council" role="tab" data-toggle="tab">Advisory Council</a></li>
			  </ul>
				<!-- Tab panes -->
				<div class="tab-content sort-by-team">
				  <div role="tabpanel" class="tab-pane fade in active" id="CFT_Staff">
					  <div class="row mb-5">
						  <div class="col-sm-3">
							  <span class="fs-16 text-uppercase fw-600 d-inline-block pb-4 mt-5">Sort by team:</span>
								<a class="d-block mb-2 fs-16 fw-600 active" href="#">Leadership</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Donor Services & Relationships</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Finance & Administration</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Philanthropy & Grants</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Educate Texas</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Communications</a>
								<a class="d-block mb-2 fs-16 fw-600" href="#">Nort Texas Giving Day & Gift Processing</a>
                <a class="d-block mb-2 fs-16 fw-600" href="#">View All Staff</a>
						  </div>
							<div class="col-sm-9 staff-list">
							  <div class="row mt-5">
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_DaveScullin.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">David J. Scullin</span>
										<span class="fs-14 d-block text-center pos-title">President & CEO</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_BethBull.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Elizabeth W. Bull</span>
										<span class="fs-14 d-block text-center pos-title">Senior Vice President and Chief Financial Officer</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_JohnFitzpatrick.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">John Fitzpatrick</span>
										<span class="fs-14 d-block text-center pos-title">Executive Director, Educate Texas</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_SarahSnelson.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Sarah Cotton Nelson</span>
										<span class="fs-14 d-block text-center pos-title">Chief Philanthropy Officer</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_MonicaEgertSmith.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Monica Egert Smith</span>
										<span class="fs-14 d-block text-center pos-title">Chief Relationships Officer</span>
                  </div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/staff_SusanSwan-Smith.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">Susan Swan Smith</span>
										<span class="fs-14 d-block text-center pos-title">Chief Giving Day Officer</span>
									</div>
									<div class="col-sm-4">
										<img class="img-responsive mx-auto mb-2" src="../annual-report/images/gtang.jpg">
										<span class="fs-18 d-block mb-1 text-center fw-600">George Tang</span>
										<span class="fs-14 d-block text-center pos-title">Managing Director, Educate Texas</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="Trustees">...</div>
					  <div role="tabpanel" class="tab-pane fade" id="Advisory_Council">...</div>
					</div>
				</div>
			</div>
		</div>
</div>

<!-- First Story Expand -->
<div class="border-bottom-med-gray">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<a class="dark-gray-text pt-3 pb-6 d-inline-block fs-14 text-uppercase btn-expand-story collapse-trigger" href="#c11" aria-expanded="false" aria-controls="c11">
          <span class="exp-txt">Expand</span>
          <span class="col-txt">Collapse</span>
          Story
          <i class="pl-1 fa fa-angle-down" aria-hidden="true"></i><i class="pl-1 fa fa-angle-up" aria-hidden="true"></i>
        </a>
			</div>
		</div>
	</div>
</div>

<!-- Second Title -->
<div class="container-wrapper container">
  <div class="row">
    <div class="col-md-12 story-content">
        <h1 class="mb-2 mt-5">Introducing the New CFTexas.org</h1>
    </div>
  </div>
</div>

<!-- Second Story -->
<div class="collapse" id="c12">
      <div class="container">
				<div class="row pt-4">
					<div class="col-sm-6">
						<p>Our website has been completely redesigned with you in mind, to make giving easier, more effective and more enjoyable than ever before. Get inspired by browsing our library of impact stories, stay up-to-date on our community impact initiatives, meet our esteemed CFT experts and trustees, view upcoming events and more. Take a look around an... [missing full info]</p>
            <a href="https://www.cftexas.org/" class="btn btn-text text-left mw-200 mb-0 d-block mt-5 fs-16" role="button"><span><span class="text-uppercase">Visit our new site</span></a>
					</div>
					<div class="col-sm-6">
						<img class="img-responsive mx-auto" src="../annual-report/images/laptop.jpg">
					</div>
				</div>
			</div>
</div>

<!-- Second Story Expand -->
<!-- First Story Expand -->
<div class="border-bottom-med-gray">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<a class="dark-gray-text pt-3 pb-6 d-inline-block fs-14 text-uppercase btn-expand-story collapse-trigger" href="#c12" aria-expanded="false" aria-controls="c11">
          <span class="exp-txt">Expand</span>
          <span class="col-txt">Collapse</span>
          Story
          <i class="pl-1 fa fa-angle-down" aria-hidden="true"></i><i class="pl-1 fa fa-angle-up" aria-hidden="true"></i>
        </a>
			</div>
		</div>
	</div>
</div>

您步入正轨，但需要进行一些修改。可以使用一些.find()和.siblings()之类的jQuery选择器，而不是使用特定的类名来定位所有元素，仅查找与被单击的故事按钮相关的元素。这样一来，您就可以更改文本并逐个展开故事，而无需使用可同时影响所有故事的处理程序。

请注意，我从链接中删除了data-toggle="collapse"属性，并添加了collapse-trigger类。默认的 Bootstrap 3 功能正在干扰客户click事件。为了执行自定义处理程序，我需要阻止默认功能的出现。

答案 1 :(得分：0)

1）按类定位特定的可折叠按钮。只需创建一个...让说“ .chevron-toggle” 2）使用.this使jquery脚本找到具有该特定类的特定按钮的carret。 3）在该jquery中切换类。

/*------------- css ------------*/
.rotate-chevron{
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

.rotate-chevron.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*------------- html ------------*/


<div  class="chevron-toggle accordion-toggle collapsed" data-toggle="collapse" data-parent="#Accordion" data-target="#content_inside" aria-expanded="false">
     <h4>
       Edit Info 
       <i class="rotate-chevron fa fa-chevron-down"></i>
     </h4>
</div>

<div id="content_inside" class=" collapse" aria-expanded="false">
hello
</div>


//JQuery Chevron rotation
$(document).ready(function() {
$('.chevron-toggle').click(function(e) {
      $(this).find(".rotate-chevron").toggleClass("down");  
  });

});
相关问题
最新问题