活動狀態手風琴

Question

將此腳本用於手風琴。但是當按鈕處於活動狀態時，我無法找到如何更改accordionButton的顏色。

JS

$(document).ready(function() { 

$('.accordionButton').click(function() { 

    $('.accordionButton').removeClass('on'); 

    $('.accordionContent').slideUp('normal'); 

    if ($(this).next().is(':hidden') == true) { 

     $(this).addClass('on'); 

     $(this).next().slideDown('normal'); 
    } 

}); 

$('.accordionContent').hide(); 
$(".accordionContent").first().show(); 

}); 

CSS

.accordionButton { 
color: #fff; 
text-transform: uppercase; 
font-variant: normal; 
background-color: #51a429; 
padding: 2px 2px 2px 5%; 
cursor: pointer; 
border-bottom: 5px solid #f5f5f5 
} 

.accordionButton:hover { 
background-color: #1b3281 
} 

.accordionContent { 
padding: 4% 5% 2% 0% 
} 

感謝。

Answer 1

手風琴的工作方式是將.on類添加到當前打開的手風琴選項卡的按鈕中。因此，我認爲這是你的意思：

.accordionButton.on { 
    background-color: yellow; 
} 

如果你的意思是單擊按鈕時的那一刻，那麼這將這樣的伎倆：

.accordionButton:active { 
    background-color: red; 
} 

你可以看到在這些行爲下面的代碼段。

$(document).ready(function() { 
 
    $('.accordionButton').click(function() { 
 
    $('.accordionButton').removeClass('on'); 
 
    $('.accordionContent').slideUp('normal'); 
 
    if ($(this).next().is(':hidden') == true) { 
 
     $(this).addClass('on'); 
 
     $(this).next().slideDown('normal'); 
 
    } 
 
    }); 
 

 
    $(".accordionButton").first().addClass('on'); 
 
    $('.accordionContent').hide(); 
 
    $(".accordionContent").first().show() 
 
});

.accordionButton { 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-variant: normal; 
 
    background-color: #51a429; 
 
    padding: 2px 2px 2px 5%; 
 
    cursor: pointer; 
 
    border-bottom: 5px solid #f5f5f5 
 
} 
 
.accordionButton:hover { 
 
    background-color: #1b3281 
 
} 
 
.accordionButton:active { 
 
    background-color: red; 
 
} 
 
.accordionButton.on { 
 
    background-color: yellow; 
 
} 
 
.accordionContent { 
 
    padding: 4% 5% 2% 0% 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="accordion-container" class="f-ms"> 
 
    <div id="accordion-link-1" class="accordionButton"> 
 
    <p class="f-fp f-lp">TEST</p> 
 
    </div> 
 
    <!-- end accordion-link-1 --> 
 
    <div id="accordion-1" class="accordionContent"> 
 
    <div id="accordion-title-1" class="f-ms"> 
 
     <h1 class="f-fp">Global deals </h1> 
 
     <p><span class="size13">Select tile for details</span> 
 
     </p> 
 
     <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO </a></span> 
 
     </p> 
 
    </div> 
 
    <!-- end accordion-title-1 --> 
 
    <div id="accordion-content-1" class="f-ms flex-container"> 
 
     <a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087"> 
 
     <div id="accordion-1-tile-1" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m12" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-1-tile-1 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-1-tile-2" class="flex-grow-1 box-shadow"> 
 
      <a href="https://www.google.com/tombstone.png?type=thumbnail&did=101982"> 
 
      <img id="m13" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-1-tile-2 --> 
 
     </a> 
 
     <a href="https://www.google.com/tombstone.png?type=thumbnail&did=101"> 
 
     <div id="accordion-1-tile-3" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m14" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10 
 
" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-1-tile-3 --> 
 
     </a> 
 
    </div> 
 
    <!-- end accordion-content-1 --> 
 
    </div> 
 
    <!-- end accordion-1 --> 
 
    <div id="accordion-link-2" class="accordionButton"> 
 
    <p class="f-fp f-lp">TEST</p> 
 
    </div> 
 
    <!-- end accordion-link-2 --> 
 
    <div id="accordion-2" class="accordionContent"> 
 
    <div id="accordion-title-2" class="f-ms"> 
 
     <h1 class="f-fp">Global deals </h1> 
 
     <p><span class="size13">Select tile for details</span> 
 
     </p> 
 
     <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO </a></span> 
 
     </p> 
 
    </div> 
 
    <!-- end accordion-title-2 --> 
 
    <div id="accordion-content-2" class="f-ms flex-container"> 
 
     <a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087"> 
 
     <div id="accordion-2-tile-1" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m15" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-2-tile-1 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-2-tile-2" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m16" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-2-tile-2 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-2-tile-3" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m17" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10 
 
" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-2-tile-3 --> 
 
     </a> 
 
    </div> 
 
    <!-- end accordion-content-2 --> 
 
    </div> 
 
    <!-- end accordion-2 --> 
 
    <div id="accordion-link-3" class="accordionButton"> 
 
    <p class="f-fp f-lp">TEST</p> 
 
    </div> 
 
    <!-- end accordion-link-3 --> 
 
    <div id="accordion-3" class="accordionContent"> 
 
    <div id="accordion-title-3" class="f-ms"> 
 
     <h1 class="f-fp">Global deals</h1> 
 
     <p><span class="size13">Select tile for details</span> 
 
     </p> 
 
     <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO </a></span> 
 
     </p> 
 
    </div> 
 
    <!-- end accordion-title-3 --> 
 
    <div id="accordion-content-3" class="f-ms flex-container"> 
 
     <a href=""> 
 
     <div id="accordion-3-tile-1" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m18" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-3-tile-1 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-3-tile-2" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m19" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-3-tile-2 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-3-tile-3" class="flex-grow-1 "> 
 
      <a href=""> 
 
      <img id="m20" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-3-tile-3 --> 
 
     </a> 
 
    </div> 
 
    <!-- end accordion-content-3 --> 
 
    </div> 
 
    <!-- end accordion-3 --> 
 
    <div id="accordion-link-4" class="accordionButton"> 
 
    <p class="f-fp f-lp">TEST</p> 
 
    </div> 
 
    <!-- end accordion-link-4 --> 
 
    <div id="accordion-4" class="accordionContent"> 
 
    <div id="accordion-title-4" class="f-ms"> 
 
     <h1 class="f-fp">Global deals</h1> 
 
     <p><span class="size13">Select tile for details</span> 
 
     </p> 
 
     <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO </a></span> 
 
     </p> 
 
    </div> 
 
    <!-- end accordion-title-4 --> 
 
    <div id="accordion-content-4" class="f-ms flex-container"> 
 
     <a href=""> 
 
     <div id="accordion-4-tile-1" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m21" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-4-tile-1 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-4-tile-2" class="flex-grow-1 "> 
 
      <a href=""> 
 
      <img id="m22" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-4-tile-2 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-4-tile-3" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m23" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10 
 
" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-4-tile-3 --> 
 
     </a> 
 
    </div> 
 
    <!-- end accordion-content-4 --> 
 
    </div> 
 
    <!-- end accordion-4 --> 
 
    <div id="accordion-link-5" class="accordionButton"> 
 
    <p class="f-fp f-lp">TEST</p> 
 
    </div> 
 
    <!-- end accordion-link-5 --> 
 
    <div id="accordion-5" class="accordionContent"> 
 
    <div id="accordion-title-5" class="f-ms"> 
 
     <h1 class="f-fp">Global deals</h1> 
 
     <p><span class="size13">Select tile for details</span> 
 
     </p> 
 
     <p class="f-lp"><span class="buttonBlue"><a href="#">CLICK HERE TO GO TO </a></span> 
 
     </p> 
 
    </div> 
 
    <!-- end accordion-title-5 --> 
 
    <div id="accordion-content-5" class="f-ms flex-container"> 
 
     <a href=""> 
 
     <div id="accordion-5-tile-1" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m24" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-5-tile-1 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-5-tile-2" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m25" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-5-tile-2 --> 
 
     </a> 
 
     <a href=""> 
 
     <div id="accordion-5-tile-3" class="flex-grow-1 box-shadow"> 
 
      <a href=""> 
 
      <img id="m26" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt=""> 
 
      </a> 
 
     </div> 
 
     <!-- end accordion-5-tile-3 --> 
 
     </a> 
 
    </div> 
 
    <!-- end accordion-content-5 --> 
 
    </div> 
 
    <!-- end accordion-5 --> 
 

 
</div>