jquery - 使用 jquery 向下拉选项卡添加按钮

Question

HTML

<div class="sign-up-wrapper">

<div class="sign-up-container">
<div id="sign-up-myButton" class="sign-up-header"></div>
<div id="sign-up-content" class="hide-content">content here content here content here content here content here content here content here content here content here content here content here</div>
</div>
<div id="sign-up-myButton3" class="sign-up-footer">Button 1</div>

</div>

CSS

body {padding:0;margin:0;}

.sign-up-wrapper {border:1px solid red;width:459px;line-height:normal;font-size:18px;z-index:110;position:absolute;left:0;top:0;}
.sign-up-container {}
.sign-up-header {height:8px;}
.hide-content {position: absolute !important;top: -9999px !important;left: -9999px !important;}

.sign-up-footer {text-align:center;width:99px;height:23px;cursor:pointer;background:#999;margin-left:19px;}


#sign-up-content {background:#096;width:420px;margin:auto;}

jQuery

var $button = jQuery('#sign-up-myButton3'),
  $text   = jQuery('#sign-up-content'),
  visible = false;

$button.click(function(){
if ( visible ) {
  $text.slideUp('fast',function(){
    $text.addClass('hide-content')
         .slideDown(0);
  });
} else {
  $text.slideUp(0,function(){
    $text.removeClass('hide-content')
         .slideDown('fast');
  });
}
visible = ! visible;
});

可以请帮助我，如何在按钮 1 旁边添加 2 或 3 个按钮，按下时每个按钮的内容都不同

我只有 1 个带有内容的按钮，这是我的小提琴http://jsfiddle.net/gbFKe/

Answer 1

过滤器解决方案在这里 html

    <div class="sign-up-wrapper">
<div id="sign-up-myButton1" class="sign-up-footer">Button 1</div>
<div id="sign-up-myButton2" class="sign-up-footer">Button 2</div>
<div id="sign-up-myButton3" class="sign-up-footer">Button 3</div>
<div class="sign-up-container">
<div id="sign-up-myButton" class="sign-up-header"></div>
<div id="sign-up-content1" class="hide-content">content here content here content here content here content here content here content here content here content here content here content here</div>
    <div id="sign-up-content2" class="hide-content">button2 content</div>
    <div id="sign-up-content3" class="hide-content">button3content</div>
</div>
</div>​

jquery ，有冗余代码，您可以根据需要自定义

    var $button1 = jQuery('#sign-up-myButton1'),
      $text1   = jQuery('#sign-up-content1'),
      visible = false;

    $button1.click(function(){
    if ( visible ) {
      $text1.slideUp('fast',function(){
        $text1.addClass('hide-content')
             .slideDown(0);
      });
    } else {
      $text1.slideUp(0,function(){
        $text1.removeClass('hide-content')
             .slideDown('fast');
      });
    }
    visible = ! visible;
    });
var $button2 = jQuery('#sign-up-myButton2'),
      $text2   = jQuery('#sign-up-content2'),
      visible = false;

    $button2.click(function(){
    if ( visible ) {
      $text2.slideUp('fast',function(){
        $text2.addClass('hide-content')
             .slideDown(0);
      });
    } else {
      $text2.slideUp(0,function(){
        $text2.removeClass('hide-content')
             .slideDown('fast');
      });
    }
    visible = ! visible;
    });


var $button3 = jQuery('#sign-up-myButton3'),
      $text3   = jQuery('#sign-up-content3'),
      visible = false;

    $button3.click(function(){
    if ( visible ) {
      $text3.slideUp('fast',function(){
        $text3.addClass('hide-content')
             .slideDown(0);
      });
    } else {
      $text3.slideUp(0,function(){
        $text3.removeClass('hide-content')
             .slideDown('fast');
      });
    }
    visible = ! visible;
    });

​

Answer 2

这将使您对应该做什么有基本的了解。

Javascript

$('#content').hide();
$('#content2').hide();
$('#content3').hide();

$('#button1').on('click',function(){
    $('#content').slideDown();
});​​​​​​​​

$('#button2').on('click',function(){
    $('#content2').slideDown();
});   

$('#button3').on('click',function(){
    $('#content3').slideDown();
});

​ HTML

    <button id='button1'>Button1</button>
    <div id='content'>
        <p>Test</p>
        <button id='button2'>Button1</button>
        <button id='button3'>Button1</button>
        <div id='content2'>
            <p>alsdkfjasdfl</p>
        </div>
        <div id='content3'>
            <p>asdfladsf</p>
        </div>
    </div>