文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >jQuery按钮切换不工作

问jQuery按钮切换不工作
EN

Stack Overflow用户
提问于 2018-06-12 22:13:04
回答 3查看 59关注 0票数 0

我需要为我的项目创建手风琴菜单。大部分时间都完成了，但我有一个问题，打开-关闭按钮。当我点击下一个选项卡时，我需要按钮来改变状态。但它们并没有改变。我做错了什么？

​

代码语言：javascript
复制
$('.answers__tabTitle').next().hide();
	$('.answers__tabTitle').click(function(){
	$(this).next().slideToggle();
	$('.answers__tabTitle').not(this).next().stop(true,true).slideUp();
	$(this).addClass('active');
	$('.active .open-close').toggleClass('on');
	$(this).removeClass('active');
});
代码语言：javascript
复制
.answers__tabText {
	font-family: "MuseoSansCyrl_300";
	font-size: 21px;
	text-align: left;
	padding: 20px;
}

.answers__tabTitle .open-close {
	width: 30px;
	height: 30px;
	float: right;
	transform: rotate(45deg);
	transition: all .3s ease;
	opacity: .8;
}

.answers__tabTitle .on {
	transform: rotate(0deg);
	opacity: .4;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answers__tabsWrap">

					<div class="answers__tab">
						<hr>
						<p class="answers__tabTitle">Сколько стоит установка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
						<p class="answers__tabText">Установка входной двери зависит от многих факторов. Минимальная цена, которая может быть это 1 600 рублей. Точную цену установки, под Ваш проём может назвать технический специалист на замере.</p> 
						<hr>
					</div>

					<div class="answers__tab">
						<hr>
						<p class="answers__tabTitle">Сколько времени идёт изготовление двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
						<p class="answers__tabText">Процесс изготовления стандартных дверей занимает 7-10 дней, а нестандартных 10-14 дней в зависимости от сложности конструкции двери. Возможно срочное изготовление за 3 дня. Доплата 1 000 рублей.</p> 
						<hr>
					</div>

					<div class="answers__tab">
						<hr>
						<p class="answers__tabTitle">Сколько стоит замер проёма входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
						<p class="answers__tabText">Замер проёма входной двери по Ульяновской области бесплатный.</p> 
						<hr>
					</div>

					<div class="answers__tab">
						<hr>
						<p class="answers__tabTitle">Сколько стоит демонтаж старой двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
						<p class="answers__tabText">Демонтаж старой двери бесплатный.</p> 
						<hr>
					</div>

					<div class="answers__tab">
						<hr>
						<p class="answers__tabTitle">Когда будет установка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
						<p class="answers__tabText">Установка стандартных дверей, которые есть на складе может быть произведена на следующий день после заключения договора. Если Вам нужна дверь нестандартного размера, то надо будет ожидать время изготовления, потом Вам позвонит менеджер и Вы с ним договоритесь на любой удобный для вас день.</p> 
						<hr>
					</div>

					<div class="answers__tab">
						<hr>
						<p class="answers__tabTitle">Сколько стоит доставка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
						<p class="answers__tabText">Доставка входной двери в пределах города Ульяновска стоит 500 рублей, а за пределами города 1 километр = 17 рублей. Также возможен самовывоз входной двери.</p> 
						<hr>
					</div>

				</div>

​

$('.answers__tabTitle').not(this).removeClass('active')；

这个修复部分解决了问题，但有时按下按钮时，他们的随机顺序切换。我怎样才能解决这个问题？截图链接

html
css
jquery
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-14 07:30:01

终于找到了解决办法！将此代码添加到脚本的末尾：

代码语言：javascript
复制
$('.open-close').not('.active .open-close').removeClass('on');

而且这个很管用！感谢大家(当然还有我)的帮助！

​

代码语言：javascript
复制
 $('.answers__tabTitle').next().hide();
 $('.answers__tabTitle').click(function(){
     $(this).next().slideToggle();
     $('.answers__tabTitle').not(this).next().stop(true,true).slideUp();
     $(this).addClass('active');
     $('.active .open-close').toggleClass('on');
     $('.answers__tabTitle').not(this).removeClass('active');
     $('.open-close').not('.active .open-close').removeClass('on');
});
代码语言：javascript
复制
.answers__tabText {
    	font-family: "MuseoSansCyrl_300";
    	font-size: 21px;
    	text-align: left;
    	padding: 20px;
    }

    .answers__tabTitle .open-close {
    	width: 30px;
    	height: 30px;
    	float: right;
    	transition: all .3s ease;
    	opacity: .4;
    }

    .answers__tabTitle .on {
    	transform: rotate(45deg);
    	opacity: .8;
    }
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answers__tabsWrap">
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит установка входной двери?<img class="open-close" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Установка входной двери зависит от многих факторов. Минимальная цена, которая может быть это 1 600 рублей. Точную цену установки, под Ваш проём может назвать технический специалист на замере.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько времени идёт изготовление двери?<img class="open-close" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Процесс изготовления стандартных дверей занимает 7-10 дней, а нестандартных 10-14 дней в зависимости от сложности конструкции двери. Возможно срочное изготовление за 3 дня. Доплата 1 000 рублей.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит замер проёма входной двери?<img class="open-close" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Замер проёма входной двери по Ульяновской области бесплатный.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит демонтаж старой двери?<img class="open-close" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Демонтаж старой двери бесплатный.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Когда будет установка входной двери?<img class="open-close" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Установка стандартных дверей, которые есть на складе может быть произведена на следующий день после заключения договора. Если Вам нужна дверь нестандартного размера, то надо будет ожидать время изготовления, потом Вам позвонит менеджер и Вы с ним договоритесь на любой удобный для вас день.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит доставка входной двери?<img class="open-close" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Доставка входной двери в пределах города Ульяновска стоит 500 рублей, а за пределами города 1 километр = 17 рублей. Также возможен самовывоз входной двери.</p>
      <hr>
   </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2018-06-12 22:54:43

只需将最后一行替换为：

代码语言：javascript
复制
$('.answers__tabTitle').not(this).removeClass('active');

下面是一个工作示例：

​

代码语言：javascript
复制
 $('.answers__tabTitle').next().hide();
 $('.answers__tabTitle').click(function(){
     $(this).next().slideToggle();
     $('.answers__tabTitle').not(this).next().stop(true,true).slideUp();
     $(this).addClass('active');
     $('.active .open-close').toggleClass('on');
     $('.answers__tabTitle').not(this).removeClass('active');
});
代码语言：javascript
复制
.answers__tabText {
    	font-family: "MuseoSansCyrl_300";
    	font-size: 21px;
    	text-align: left;
    	padding: 20px;
    }

    .answers__tabTitle .open-close {
    	width: 30px;
    	height: 30px;
    	float: right;
    	transform: rotate(45deg);
    	transition: all .3s ease;
    	opacity: .8;
    }

    .answers__tabTitle .on {
    	transform: rotate(0deg);
    	opacity: .4;
    }
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answers__tabsWrap">
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит установка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Установка входной двери зависит от многих факторов. Минимальная цена, которая может быть это 1 600 рублей. Точную цену установки, под Ваш проём может назвать технический специалист на замере.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько времени идёт изготовление двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Процесс изготовления стандартных дверей занимает 7-10 дней, а нестандартных 10-14 дней в зависимости от сложности конструкции двери. Возможно срочное изготовление за 3 дня. Доплата 1 000 рублей.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит замер проёма входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Замер проёма входной двери по Ульяновской области бесплатный.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит демонтаж старой двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Демонтаж старой двери бесплатный.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Когда будет установка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Установка стандартных дверей, которые есть на складе может быть произведена на следующий день после заключения договора. Если Вам нужна дверь нестандартного размера, то надо будет ожидать время изготовления, потом Вам позвонит менеджер и Вы с ним договоритесь на любой удобный для вас день.</p>
      <hr>
   </div>
   <div class="answers__tab">
      <hr>
      <p class="answers__tabTitle">Сколько стоит доставка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
      <p class="answers__tabText">Доставка входной двери в пределах города Ульяновска стоит 500 рублей, а за пределами города 1 километр = 17 рублей. Также возможен самовывоз входной двери.</p>
      <hr>
   </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2018-06-12 22:55:04

你差一点就明白了。看我下面的片段。这只是改变最后一行的问题：

代码语言：javascript
复制
$('.answers__tabTitle').not(this).removeClass('active');

​

代码语言：javascript
复制
$('.answers__tabTitle').next().hide();
$('.answers__tabTitle').click(function() {
  $(this).next().slideToggle();
  $('.answers__tabTitle').not(this).next().stop(true, true).slideUp();
  $(this).addClass('active');
  $('.active .open-close').toggleClass('on');
  $('.answers__tabTitle').not(this).removeClass('active');
});
代码语言：javascript
复制
.answers__tabText {
  font-family: "MuseoSansCyrl_300";
  font-size: 21px;
  text-align: left;
  padding: 20px;
}

.answers__tabTitle .open-close {
  width: 30px;
  height: 30px;
  float: right;
  transform: rotate(45deg);
  transition: all .3s ease;
  opacity: .8;
}

.answers__tabTitle .on {
  transform: rotate(0deg);
  opacity: .4;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answers__tabsWrap">

  <div class="answers__tab">
    <hr>
    <p class="answers__tabTitle">Сколько стоит установка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
    <p class="answers__tabText">Установка входной двери зависит от многих факторов. Минимальная цена, которая может быть это 1 600 рублей. Точную цену установки, под Ваш проём может назвать технический специалист на замере.</p>
    <hr>
  </div>

  <div class="answers__tab">
    <hr>
    <p class="answers__tabTitle">Сколько времени идёт изготовление двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
    <p class="answers__tabText">Процесс изготовления стандартных дверей занимает 7-10 дней, а нестандартных 10-14 дней в зависимости от сложности конструкции двери. Возможно срочное изготовление за 3 дня. Доплата 1 000 рублей.</p>
    <hr>
  </div>

  <div class="answers__tab">
    <hr>
    <p class="answers__tabTitle">Сколько стоит замер проёма входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
    <p class="answers__tabText">Замер проёма входной двери по Ульяновской области бесплатный.</p>
    <hr>
  </div>

  <div class="answers__tab">
    <hr>
    <p class="answers__tabTitle">Сколько стоит демонтаж старой двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
    <p class="answers__tabText">Демонтаж старой двери бесплатный.</p>
    <hr>
  </div>

  <div class="answers__tab">
    <hr>
    <p class="answers__tabTitle">Когда будет установка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
    <p class="answers__tabText">Установка стандартных дверей, которые есть на складе может быть произведена на следующий день после заключения договора. Если Вам нужна дверь нестандартного размера, то надо будет ожидать время изготовления, потом Вам позвонит менеджер и Вы с ним
      договоритесь на любой удобный для вас день.</p>
    <hr>
  </div>

  <div class="answers__tab">
    <hr>
    <p class="answers__tabTitle">Сколько стоит доставка входной двери?<img class="open-close on" src="http://i.piccy.info/i9/ee9f224ec07247dfc032542552a70df2/1528841272/408/1250964/open_close.png" alt="open-close"></p>
    <p class="answers__tabText">Доставка входной двери в пределах города Ульяновска стоит 500 рублей, а за пределами города 1 километр = 17 рублей. Также возможен самовывоз входной двери.</p>
    <hr>
  </div>

</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50826555

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档