jQuery按钮切换不起作用

Question

我需要为我的项目创建一个手风琴菜单。 大多数情况下都可以完成，但是我对开合按钮有疑问。 单击下一个选项卡时，需要按钮来更改状态。 但是他们并没有改变。 我究竟做错了什么？

 $('.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'); }); 

 .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; } 

 <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> договоритесьналюбойудобныйдлявасдень <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'）;

此修复程序部分解决了问题，但是当按随机顺序切换按钮时有时会保持按下状态。 我怎样才能解决这个问题？ 屏幕截图链接

Answer 1

您只需要将最后一行替换为：

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

这是一个工作示例：

  $('.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'); }); 

 .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; } 

 <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> договоритесьналюбойудобныйдлявасдень <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> 

Answer 2

哇，差不多了。 请参阅下面的代码段。 只需更改最后一行即可：

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

 $('.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'); }); 

 .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; } 

 <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> 

Answer 3

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

$('.open-close').not('.active .open-close').removeClass('on');

这有效！ 感谢所有人（当然还有我自己）的帮助！

  $('.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'); }); 

 .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; } 

 <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> договоритесьналюбойудобныйдлявасдень <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>