Question

我一直试图让我的jquery手风琴图标切换。目前我手风琴正在工作，但箭头向下，向上箭头的图像没有变化。我对jquery很新，一直很难弄明白，怎么做。

$(function(){

     // Hide all but first ul li
  $('ul#accordion > li ul').click(function(e){
    e.stopPropagation();


  })
  .filter(':not(:first)')
  .hide();

$('ul#accordion > li').click(function(){
  // Set up a variable to detect if the ul is visible
  var selfClick = $(this).find('ul:first').is(':visible');
 $(this).next().removeClass('arrow-down');
  $(this).next().addClass('arrow-up');

  // If it is open, do nothing
  if (selfClick){
    return;
  }

  // Toggle the visible panel
  $(this)
  .parent()
  .find('> li ul:visible')
  .slideToggle()


  // Toggle the hidden, clicked on panel
  $(this)
  .find('ul:first')
  .stop(true, true)
  .slideToggle()


});
});


<ul id="accordion">

  <li>

 <h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3>
    <ul>
      <li>
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 
      </li>

    </ul>
  </li>
  <li>
 <h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3>
    <ul>
      <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
      </li>

    </ul>
  </li>
  <li>
 <h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3>
    <ul>
      <li>
      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 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </li>

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

CSS

#accordion {
  width:735px;
  padding-left:0px;
}

h3{
    background:url(../img/accordion_bg.jpg) repeat-x;
    height:38px;
    padding:0px 0px 0px 10px;
    line-height:38px;
    margin:0px;
}

#accordion li {
  cursor:pointer;
  font-weight:bold;
  color:#015287;
  margin-bottom:2px;
  list-style:none;
  border-radius:4px;
}

.accordion_head{
    background:url(../img/arrow_down.png) right center no-repeat;
}

#accordion li.active {
    background-color:#F00;
}

 .arrow-down {
  float:right;
  background:url(../img/arrow_down.png) no-repeat right center;
  margin-right:15px;
  margin-top:10px;
  width:18px;
  height:18px;
 } 

 .arrow-up {
  float:right;
  background:url(../img/arrow_up.png) no-repeat right center;
  margin-right:15px;
  margin-top:10px;
  width:18px;
  height:18px;
 } 

#accordion li ul {
  padding:0;
  margin:10px 0 0 0;
}

#accordion li ul li{
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

#accordion li li {
  font-weight:normal;
  border:0;
}

Answer 1

检查两条评论// ===修改和// ===新代码

$(function(){

     // Hide all but first ul li
  $('ul#accordion > li ul').click(function(e){
    e.stopPropagation();


  })
  .filter(':not(:first)')
  .hide();

$('ul#accordion > li').click(function(){
  // Set up a variable to detect if the ul is visible
  var selfClick = $(this).find('ul:first').is(':visible');
 //=== modifications 
 //$(this).next().removeClass('arrow-down');
  //$(this).next().addClass('arrow-up');




  // If it is open, do nothing
  if (selfClick){
    return;
  }

//=== new code 
 $('#accordion').find('i').removeClass('arrow-down').addClass('arrow-up'); 
    $(this).find('i').removeClass('arrow-up');
    $(this).find('i').addClass('arrow-down');  



  // Toggle the visible panel
  $(this)
  .parent()
  .find('> li ul:visible')
  .slideToggle()


  // Toggle the hidden, clicked on panel
  $(this)
  .find('ul:first')
  .stop(true, true)
  .slideToggle()


});
});

FIDDLE

手风琴图标不会切换

1 个答案: