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个按钮

我只有一个包含内容的按钮，这里是我的小提琴http://jsfiddle.net/gbFKe/

Answer 1

fildler解决方案here 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>

使用jquery向slidingown选项卡添加按钮

2 个答案: