изменение функции зависания в функцию щелчка в jquery accordian

Question

Фактически я работаю над этим соглашением, я хочу изменить этот аккордеон наведите курсор на клик. но в то время как я chnage я получил некоторые errors..if кто-нибудь, как изменить функцию парения в OnClick функции ... я вставьте полный код здесь ....

<script type="text/javascript"> 
     $(function() { 
      $('#accordion > li').hover(
       function() { 
        var $this = $(this); 
        $this.stop().animate({'width':'480px'},500); 
        $('.heading',$this).stop(true,true).fadeOut(); 
        $('.bgDescription',$this).stop(true,true).slideDown(500); 
        $('.description',$this).stop(true,true).fadeIn(); 
       }, 
       function() { 
        var $this = $(this); 
        $this.stop().animate({'width':'115px'},1000); 
        $('.heading',$this).stop(true,true).fadeIn(); 
        $('.description',$this).stop(true,true).fadeOut(500); 
        $('.bgDescription',$this).stop(true,true).slideUp(700); 
       } 
      ); 
     }); 
    </script> 

Image 1: Michelle Meiklejohn/FreeDigitalPhotos.net

Image 2: Luigi Diamanti/FreeDigitalPhotos.net

Image 3: Tina Phillips/FreeDigitalPhotos.net

Image 4: Ahmet Guler/FreeDigitalPhotos.net

 <ul class="accordion" id="accordion"> 
      <li class="bg1"> 
       <div class="heading">Guler</div> 
       <div class="bgDescription"></div> 
       <div class="description"> 
        <h2>Guler</h2> 
        <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 exercitation ullamco laboris nisi 
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
         reprehenderit in voluptate velit esse cillum dolore eu fugiat 
         nulla pariatur.</p> 
        <a href="#">more &rarr;</a> 
       </div> 
      </li> 
      <li class="bg2"> 
       <div class="heading">Phillips</div> 
       <div class="bgDescription"></div> 
       <div class="description"> 
        <h2>Phillips</h2> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
         quae ab illo inventore veritatis et quasi architecto beatae vitae 
         dicta sunt explicabo. </p> 
        <a href="#">more &rarr;</a> 
       </div> 

      </li> 
      <li class="bg3"> 
       <div class="heading">Diamanti</div> 
       <div class="bgDescription"></div> 
       <div class="description"> 
        <h2>Diamanti</h2> 
        <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 exercitation ullamco laboris nisi 
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
         reprehenderit in voluptate velit esse cillum dolore eu fugiat 
         nulla pariatur.</p> 
        <a href="#">more &rarr;</a> 
       </div> 

      </li> 
      <li class="bg4 bleft"> 
       <div class="heading">Meiklejohn</div> 
       <div class="bgDescription"></div> 
       <div class="description"> 
        <h2>Meiklejohn</h2> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
         quae ab illo inventore veritatis et quasi architecto beatae vitae 
         dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
         sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
         dolores eos qui ratione voluptatem sequi nesciunt.</p> 
        <a href="#">more &rarr;</a> 
       </div> 

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

Answer 1

Просто позвоните активный API для аккордеона:

$(function() { 
     $('#accordion > li').hover(
      function() { 
       $('#accordion').accordion('option', 'active', $(this).index()); 
      }, 
      function() { 
       $('#accordion').accordion('option', 'active', false); 
      } 
     ); 
    }); 

Answer 2

Вы прятались текущий элемент курсора мыши. Теперь вы не можете сделать это с помощью события click, но вы можете действовать над остальными элементами, в которые вы не нажали.

Итак, всякий раз, когда вы нажимаете на один, предыдущий щелкнул в этом списке «все, кроме одного, которое я только что нажал», а это значит, siblings.

Это может быть то, что вы ищете:

$('#accordion li').click(function() { 
    var $this = $(this); 
    $this.stop().animate({ 
     'width': '480px' 
    }, 500); 
    $('.heading', $this).stop(true, true).fadeOut(); 
    $('.bgDescription', $this).stop(true, true).slideDown(500); 
    $('.description', $this).stop(true, true).fadeIn(); 

    //for each of the other ones I didn't click 
    var siblings = $this.siblings(); 
    siblings.each(function(){ 
     var $this = $(this); 
     $this.stop().animate({ 
      'width': '115px' 
     }, 1000); 
     $('.heading', $this).stop(true, true).fadeIn(); 
     $('.description', $this).stop(true, true).fadeOut(500); 
     $('.bgDescription', $this).stop(true, true).slideUp(700); 
    }); 
}); 

Living demo

Answer 3

ли какие-либо изменения в соответствии с вашими потребностями.

HTML Изменения в соответствии с Jquery Accordian:

  <div class="accordion" id="accordion"> 

       <div class="heading">Guler</div> 
       <div class="description"> 
        <h2>Guler</h2> 
        <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 exercitation ullamco laboris nisi 
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
         reprehenderit in voluptate velit esse cillum dolore eu fugiat 
         nulla pariatur.</p> 
        <a href="#">more &rarr;</a> 
       </div> 

       <div class="heading">Phillips</div> 

       <div class="description"> 

        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
         quae ab illo inventore veritatis et quasi architecto beatae vitae 
         dicta sunt explicabo. </p> 
        <a href="#">more &rarr;</a> 
       </div> 
</div> 

JS код:

$(function() { 
    $('#accordion').accordion({ 
     collapsible: true 
      } 
    ); 
}); 

example

Answer 4

попробовать это

<script type="text/javascript"> 
    $(function() { 
     $('#accordion > li').click(
      function() { 
       var $this = $(this); 
       $("#accordion li").find(".description:visible").slideUp(500); 
       $("#accordion li").find(".bgDescription").stop(true,true).slideUp(700); 
       $("#accordion li").find(".heading").stop(true,true).fadeIn(); 
       $this.stop().animate({'width':'480px'},500); 
       $('.heading',$this).stop(true,true).fadeOut(); 
       $('.bgDescription',$this).stop(true,true).slideDown(500); 
       $('.description',$this).stop(true,true).fadeIn(); 
      }); 
    }); 


</script>