Question

我有一个jquery下拉文本菜单，当我点击我选择下拉的选项时，图像从红色变为灰色，但是当我再次按下它时它会保持灰色并且我希望它变回红色。当我关闭它时，我无法弄清楚如何让它回到红色箭头。

代码如下。

    <script type="text/javascript">
    $(document).ready(function(){

    $('.serviceDesc').hide(); 
    //$('.serviceName:first').addClass('active').next().show(); 

    $('.serviceName').click(function(){
    if( $(this).next().is(':hidden') ) { 
    $('.serviceName').removeClass('active').next().slideUp(); 
    $(this).toggleClass('active').next().slideDown(); 
    }
    else {
    $(this).next().slideUp()
    }
    return false; 
    });

    });
    </script>

    <div id="servicesContainer">
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a> </h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
      <h2 class="serviceName"><a href="#">
        <table>
          <tr>
            <td>Test</td>
            <td class="lasttd"><div></div></td>
          </tr>
        </table>
        </a></h2>
      <div class="serviceDesc">
        <div class="block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        </div>
      </div>
    </div>
    <style>   
    #servicesContainer {
    width: 485px;
    height: 400px;
    margin: 0 auto;
    margin-top: 20px;
    }
    h2.serviceName {
    margin: 0;
    margin-bottom: 5px;
    margin-top: 5px;
    background-image: url(http://i.imgur.com/nJRIr.png);
    background-position: right top;
    background-repeat:no-repeat;
    height: 29px;
    line-height: 24px;
    width: 480px;
    font-size: 18px;
    font-weight: bold;
    float: left;
    color:#000;
    }
    h2.serviceName a {
    color: #000;
    text-decoration: none;
    display: block;
    }
    h2.active {
    background-position: right bottom;
    }

    table { width: 450px; }
    table td { white-space: nowrap; }
    table td.lasttd { width: 100%; }
    table td.lasttd div { width: 100%;
    background-image:url(http://i.imgur.com/UnCTi.gif);
    background-repeat:repeat-x;
    height: 5px;
    margin-top: 3px;

    }

    .serviceDesc {
    margin: 0 0 10px;
    padding: 0;
    overflow: hidden;
    width: 480px;
    clear: both;
    }
    .serviceDesc .block {
    }
    .serviceDesc .block p {
    color: #413f44;
    margin: 0;
    font-size:18px;
    }
    </style>

我有一种感觉它与jquery有关，没有回调css就是它吗？

以下是一个工作示例http://jsfiddle.net/AtqvM/

Answer 1

单击具有可见下一部分的标题时，您只需向下滑动下一部分，而不是从标题中删除“活动”类。变化：

$(this).next().slideUp();

到

$(this).removeClass('active').next().slideUp();

Answer 2

删除removeClass（）并将clicking函数的if / else语句之外的toggleClass（'active'）移动。

$('.serviceName').click(function(){
  if( $(this).next().is(':hidden') ) { 
    $('.serviceName').next().slideUp(); 
    $(this).next().slideDown(); 
  }
  else {
    $(this).next().slideUp()
  }
  $(this).toggleClass('active');
  return false; 
});

无法在下拉菜单中获取jquery以恢复图像

2 个答案: