切换 Jquery 不起作用

Question

我对 jquery 切换有疑问，当我尝试更改 [=] 时，它不会切换当前 div，而是切换当前 div 27=] 的切换 div 它根本不起作用。任何人都可以帮我吗？
P.S：我正在切换 SITES 块，我将其内容（背景：黄色）包装在 class="clsDashRegion_sitesBloc" 中，当我将此 class 放入我的 JS 中时不起作用。

这是我的代码

(function zipContentBloc($) {
  $('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() {
   // Toggle the panel next to the item that was clicked
   $(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
  });
 })(jQuery);

/* Plus and Minus Signs */
.clsDashRegion_zipIndicator {
 position: absolute;
 top: 6%;
    right: 0.5rem;
 transform: translateY(-50%);
 font-size: 1.8rem;
}

/* Plus */
.clsDashRegion_zipIndicator::after {
 content: '[=12=]2B';
}

/* Minus */
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after {
 content: '[=12=]2D';
 font-size: 3rem;
}

.clsDashRegion_levelOne {
 width: 25rem;
 /* height: 100%; */
 background: #3c4647;
 position: relative;
}
.clsDashRegion_catgBloc {
 position: relative;
    left: 2%;
 width: calc(100% - 1rem);
 height: 12.6rem;
}
.clsDashRegion_catgBlocBackground {
 width: 100%;
 height: 100%;
 background-color: rgba(255,255,255,0.9);
    opacity: 0.6;
}
.clsDashRegion_catgHeaderBloc {
 height: 2.5rem;
 background: aqua;
}
.clsDashRegion_catgLogoBloc {
 width: 2.5rem;
 height: 2.5rem;
 float: left;
}
.clsDashRegion_catgTitleBloc {
 float: left;
 width: calc(100% - 5.5rem);
 height: 2.5rem;
 color: #000000;
 font-weight: bold;
 font-size: 1.4rem;
 text-align: center;
 line-height: 2.5rem;
}
.clsDashRegion_catgReduceBloc {
 float: right;
 width: 3rem;
 height: 2.5rem;
 text-align: center;
 line-height: 2.5rem;
}
.clsDashRegion_catgTNTFMBloc {
 /* position: absolute; */
 /*float: none;*/
 display: block;
    float: right;
 width: 10rem;
 height: 2.5rem;
}
.clsDashRegion_catgTitleTNTFM {
 float: left;
 width: 5rem;
 height: 2.5rem;
 color: #000000;
 text-align: center;
    font-weight: bold;
}
.clsDashRegion_catgInfoBloc {
 position: relative;
 float: right;
 display: block;
    width: 100%;
 height: 2.5rem;
}
.clsDashRegion_infoTitleBloc {
 float: left;
 width: 50%;
    height: 2.5rem;
 font-weight: bold;
 margin-left: 1rem;
}
.clsDashRegion_infoValueBloc {
 float: right;
 width: 5rem;
 height: 2.5rem;
 text-align: center;
}
.clsDashRegion_wrapbuttonBlocTicket {
 position: relative;
    float: left;
    display: block;
    width: 100%;
 height: 4rem;
}
.clsDashRegion_wrapbuttonBlocGE {
 position: relative;
    float: left;
    display: block;
    width: 100%;
 height: 5rem;
}
.clsDashRegion_catgbuttonBloc {
 position: relative;
 float: left;
    top: 1rem;
    text-align: center;
}
.clsDashRegion_buttonValue {
 width: 5rem;
    height: 1.5rem;
 margin-left: 2rem;
    border: 1px solid;
    line-height: 1.4rem;
    background: chartreuse;
 border-style: groove;
}
.clsDashRegion_buttonTitle {
 margin-left: 1.5rem;
    line-height: 1.4rem;
 font-weight: bold;
}
.clsDashRegion_catgInfoBlocSite {
 position: relative;
 float: right;
 display: block;
    width: 100%;
 top: 0.5rem;
 text-align: center;
 font-weight: bold;
}
.clsDashRegion_valueTech {
 float: left;
 width: calc(100% - 4rem);
 margin-bottom: 0.5rem;
 border-style: groove;
    letter-spacing: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsSubPageArea">
  <div class="clsDashRegion_levelOne">
   <div class="clsDashRegion_catgBloc">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">ALARMES</div>
      <div class="clsDashRegion_catgReduceBloc">
       <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
       <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
      </div>
     </div>
     <div class="clsDashRegion_catgTNTFMBloc">
      <div class="clsDashRegion_catgTitleTNTFM">TNT</div>
      <div class="clsDashRegion_catgTitleTNTFM">FM</div>
     </div>
     <div class="clsDashRegion_catgInfoBloc">
      <div class="clsDashRegion_infoTitleBloc">Critique</div>
      <div class="clsDashRegion_infoValueBloc">V1</div>
      <div class="clsDashRegion_infoValueBloc">V2</div>
     </div>
    </div>
   </div>
   
   <div class="clsDashRegion_catgBloc" style="height:8em;">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">TICKETS</div>
      <div class="clsDashRegion_catgReduceBloc">
       <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
       <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
      </div>
     </div>
     <div class="clsDashRegion_wrapbuttonBlocTicket">
      <div class="clsDashRegion_catgbuttonBloc">
       <div class="clsDashRegion_buttonValue">V1</div>
       <div class="clsDashRegion_buttonTitle">En cours</div>
      </div>
     </div>
    </div>
   </div>
   
   <div class="clsDashRegion_catgBloc" style="height:20rem;">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">SITES</div>
      <div class="clsDashRegion_zipIndicator"></div>
     </div>
     <div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;">
      <div class="clsDashRegion_catgTNTFMBloc">
       <div class="clsDashRegion_catgTitleTNTFM">TNT</div>
       <div class="clsDashRegion_catgTitleTNTFM">FM</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">-3dB</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">Rx</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">Perte HF</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">Décrochage HS</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_wrapbuttonBlocGE">
       <div class="clsDashRegion_catgInfoBlocSite">GE Actif</div>
       <div class="clsDashRegion_catgbuttonBloc">
        <div class="clsDashRegion_buttonValue">V1</div>
        <div class="clsDashRegion_buttonTitle">En cours</div>
       </div>
       <div class="clsDashRegion_catgbuttonBloc">
        <div class="clsDashRegion_buttonValue">V2</div>
        <div class="clsDashRegion_buttonTitle">- 10 jrs</div>
       </div>
      </div>
     </div>
    </div>
   </div>
   
   <div class="clsDashRegion_catgBloc" style="height:18rem;">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div>
      <div class="clsDashRegion_catgReduceBloc">
       <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
       <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
      </div>
     </div>
     <div class="clsDashRegion_catgbuttonBloc">
      <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div>
      <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div>
     </div>
    </div>
   </div>
  </div>
 </div>

Answer 1

发生这种情况是因为您在 on('click', '.clsDashRegion_catgBloc',...

中使用了额外的选择器

试试这个：

    $('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) {
        // Toggle the panel next to the item that was clicked
        $( event.target ).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
    });

$(这个) = $('.clsDashRegion_levelOne'); - 您添加的区块 .on();

$( event.target ) =$('.clsDashRegion_catgBloc'); - 被准确点击的区块

Fiddle 示例：https://jsfiddle.net/z4tdxmbk/ 检查 this 也

切换 Jquery 不起作用

toggle Jquery doesn't work

javascript

jquery

toggle