jQuery幻灯片隐藏和显示相同的按钮 [英] jQuery slide hide and show same button

问题描述

我有这个简单的jquery幻灯片，我想只有一个按钮。如果显示div，则显示按钮将成为隐藏按钮。如果div被隐藏，隐藏按钮将成为一个显示按钮。

I have this simple jquery slide that I want to have only one button. If the div is being shown, the show button will become a hide button. And if the div is hidden, the hide button will become a show button.

目前，我有一个单独的显示和隐藏按钮。我不知道如何将这个按钮合并成一个。我希望有人在这里可以帮助我。 ：（

Currently, mine has a separate show and hide buttons. I don't know how to merge this buttons into one. I hope someone here can help me. :(

    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" 
    src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">

     $(document).ready(function() {

       $("#hide").click(function(){
          $(".target").hide( "slide", 
                      { direction: "up"  }, 500 );
       });

       $("#show").click(function(){
          $(".target").show( "slide", 
                       {direction: "up" }, 500 );
       });

    });
    </script>
    <style>

      div{ width:100%; 
             height:100px; 
             background: #000; 
             color: #fff; 
         }
   </style>
 </head>

 <div class="target" style="display:none;">
 My Bag Items
 <button id="hide">Hide My Bag</button>
 </div>
 <button id="show">My Bag</button> 

推荐答案

$("#toggle").click(function(){
    var $target = $('.target'),
        $toggle = $(this);

    $target.slideToggle( 500, function () {
        $toggle.text(($target.is(':visible') ? 'Hide' : 'Show') + ' My Bag');
    });
});

演示： http://jsfiddle.net/qmK26/

这篇关于jQuery幻灯片隐藏和显示相同的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！