2013-07-26 2 views
0

Я начинаю работать в jQuery. Как я могу изменить мою кнопку jQuery в режиме слайд-шоу для переключения анимации?В jQuery toggle Я хочу изменить форму кнопки

Могу ли я использовать CSS закодированы кнопку в этом HTML коде, если я могу помочь мне с полностью кодированного HTML

<html> 
<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.nav-toggle').click(function(){ 
     //get collapse content selector 
     var collapse_content_selector = $(this).attr('href');     

     //make the collapse content to be shown or hide 
     var toggle_switch = $(this); 
     $(collapse_content_selector).toggle(function(){ 
      if($(this).css('display')=='none'){ 
          //change the button label to be 'Show' 
      toggle_switch.html('Show'); 
      }else{ 
          //change the button label to be 'Hide' 
      toggle_switch.html('Hide'); 
      } 
     }); 
     }); 

    }); 
    </script> 
    <style> 
    .round-border { 
     border: 1px solid #eee; 
     border: 1px solid rgba(0, 0, 0, 0.05); 
     -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
     border-radius: 4px; 
     padding: 10px; 
     margin-bottom: 5px; 
    } 
    </style> 
</head> 
<body> 
    <section class="round-border"> 

     <div> 
      <button href="#collapse1" class="nav-toggle">Show</button> 
     </div> 
     <div id="collapse1" style="display:none"> 
      <p>Bla bla bla bla</p> 
     </div> 
    </section> 
</body> 
</html> 

ответ

0

вы можете использовать slideToggle функцию для отображения и скрытия div и изменения использовать класс toggleClass функцию demo вы не можете иметь HREF Attr в кнопке, но вы можете использовать data Аттрибут

<button data-href="collapse1" class="nav-toggle">Show</button> 
    $(".nav-toggle") .click(function(){ 
    $(this).toggleClass("active"); 
    var h =$(this).data('href'); 
    $("#"+h).slideToggle(300); 
    return false; 
    }); 
+0

Спасибо, что отвечаю ... но я получаю сообщение об ошибке, поэтому plz snd мне полный код html с изменениями @hushme – user2351143

+0

, пожалуйста, проверьте ссылку http://jsfiddle.net/L9Usa/1/ – Hushme

+0

как я могу использовать свой собственная кнопка, чтобы сделать jquery toggle slide down/slide up @ hushme – user2351143