ToggleClass не работает

Question

У меня есть HTML, который я хочу «выделить», когда я нажимаю на него. Довольно простая вещь, но я не могу за жизнь мне получить toggleClass работать:/

Вот HTML:

<div id="mainContent"> 
    <div id="pageTop"> 
     ... 
    </div> 

    <div id="content"> 
     <h2>2 Special Offers</h2> 
     <p>1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> 
     <div id="prod1"> 
      <img src="images/prod1-1.png" width="130" height="109" alt=""> 
     </div> 

     <div id="prod2"> 
      <div id="holdingBox1" class="one"> 
       <p>Choose from over 32 products</p> 
      </div> 
     </div> 

     <div id="prod3"> 
      <div id="holdingBox2" class="two"> 
       <p>Choose from over 32 products</p> 
      </div> 
     </div> 
    </div> 

    <div class="flyout1"> 
     <div id="subProd">Prod 1</div> 
     <div id="subProd">Prod 2</div> 
     <div id="subProd">Prod 3</div> 
     <div id="subProd">Prod 4</div> 
     <div id="subProd">Prod 5</div> 
     <div id="subProd">Prod 6</div> 
     <div id="subProd">Prod 7</div> 
     <div id="subProd">Prod 8</div> 
    </div> 

    <div class="flyout2"> 
     <div id="subProd">Prod 1</div> 
     <div id="subProd">Prod 2</div> 
     <div id="subProd">Prod 3</div> 
     <div id="subProd">Prod 4</div> 
     <div id="subProd">Prod 5</div> 
     <div id="subProd">Prod 6</div> 
     <div id="subProd">Prod 7</div> 
     <div id="subProd">Prod 8</div> 
    </div> 

    <div id="restOfPage"> 
    ... 
    </div> 
</div> 

и вот JQuery:

$(document).ready(function() { 
$('.flyout1').hide(); 
$("#holdingBox1").on("click",function(){ 
    $(this).toggleClass("hover"); 
    $(".flyout1").slideToggle(); 
    $(".flyout2").hide(); 
}); 
$('.flyout2').hide(); 
$("#holdingBox2").on("click",function(){ 
    $(this).toggleClass("hover"); 
    $(".flyout2").slideToggle(); 
    $(".flyout1").hide(); 
}); }); 

slideToggle материал на моих скрытых слоях отлично работает, добавив другие функции, просто, кажется, сломает его:/

Вот CSS «hover» Я пытаюсь применить

.hover { border:1px solid red; } 

Любые идеи о том, как я есть монументально с * трахнуться это вверх было бы весьма признателен, так как я просто не могу понять, что я делаю неправильно:/

Answer 1

Я tided ваш jquery немного: jsfiddle

Но похоже, что ваш код работает. Если нет то, что вы не упомянули

Jquery:

$(document).ready(function() { 
$("#holdingBox1").on("click",function(){ 
    $(this).toggleClass("hover"); 
    $(".flyout1").slideToggle(); 
    $(".flyout2").hide(); 
}); 

$("#holdingBox2").on("click",function(){ 
    $(this).toggleClass("hover"); 
    $(".flyout2").slideToggle(); 
    $(".flyout1").hide(); 
}); }); 

CSS

.hover { border:1px solid red; } 
.flyout1{display:none;} 
.flyout2{display:none;}