Question

我是jQuery的初学者。如何在向下滑动切换动画中更改我的jQuery按钮？

我是否可以在此html代码中使用css编码按钮，如果我可以帮助我完全编码的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>

Answer 1

您可以使用slideToggle功能显示和隐藏div以及更改班级使用toggleClass功能的 demo 你不能在按钮中使用href attr，但你可以使用data attr

<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; });

在jQuery切换中，我想改变按钮的形状

1 个答案: