Question

我在html中有以下内容

 <li id="options">
     <h3><span class=""></span>Options</h3>
         <ul id="childPo">
            <div class="container">

                <div class="eight columns">
                     <span class="form-required">*</span>
                     <span id="error-pi-first-name"></span>   
                     <input type="text" id="first-name" name="firstName" placeholder="First Name" value="" />
                </div>   
            </div>
          </ul>
  </li>

<li id="personalize_front" class="active">
    <h3><span class="#"></span>Personalize</h3>
       <ul id="childPf">
           <div class="container">
             blah blah

           </div>
       </ul>
 </li>

在我的javascript中我有

$("#accordian h3").click(function(){
    //slide up all the link lists
    $("#accordian ul ul").slideUp();
    //slide down the link list below the h3 clicked - only if its closed
    if(!$(this).next().is(":visible"))
    {
        $(this).next().slideDown();
    }
});

我现在需要的是，无论何时打开手风琴，我都需要更改h3标签上的背景颜色

Answer 1

这将更改＆lt; h3＆gt;的背景颜色。元素，但看起来你已经有一个＆＃34;活跃的＆＃34;它上面的课程＆lt; li＆gt;元件。这可能是你想用JQuery和CSS定位的。

＆＃13;

$("#accordian h3").click(function(){
    //slide up all the link lists
   
    $("#accordian h3").removeClass('highlight');
    
    $("#accordian ul ul").slideUp();
    //slide down the link list below the h3 clicked - only if its closed
    if(!$(this).next().is(":visible"))
    {
      
       $(this).addClass('highlight');
    
       $(this).next().slideDown();
    }
});

＆＃13;

.highlight {
    background-color: #DEF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="accordian"> 
    <ul>
        <li id="options">
             <h3><span class=""></span>Options</h3>
                 <ul id="childPo">
                    <div class="container">
        
                        <div class="eight columns">
                             <span class="form-required">*</span>
                             <span id="error-pi-first-name"></span>   
                             <input type="text" id="first-name" name="firstName" placeholder="First Name" value="" />
                        </div>   
                    </div>
                  </ul>
          </li>
        
        <li id="personalize_front" class="active">
            <h3><span class="#"></span>Personalize</h3>
               <ul id="childPf">
                   <div class="container">
                     blah blah
        
                   </div>
               </ul>
         </li>
    </ul>
</div>

＆＃13;

Answer 2

你有什么尝试？

我通过在CSS中添加一个类来设置适当的背景颜色来实现这一目标。

然后添加$(this).addClass('newClassName');

假设您想在单击另一个h3时删除该类，您可能还想使用：

$('h3.newClassName').removeClass('newClassName');也。

您可以使用.css方法添加颜色 - 但是如果需要删除，使用类可以更容易识别已显示背景颜色的任何h3。

在javascript中更改可见的accordian h3标签上的背景颜色

2 个答案: