Question

jquery新手。我想做一个slideToggle手风琴折叠并展开一个部分。

单击标题时，我想展开/折叠＆＃34;＃section＆＃34;中的所有内容。

$(document).ready(function(){
    $("h3").click(function(){
        $("#section").slideToggle();
    });
});

我有以下代码。但是我想把它变成通用的，这样如果我有任何标题我点击它，它只会折叠它下面的部分而不是所有div的ID都是＆＃34; #section＆＃34;

@implementation SKScene (Unarchive)

+ (instancetype)unarchiveFromFile:(NSString *)file {
    /* Retrieve scene file path from the application bundle */
    NSString *nodePath = [[NSBundle mainBundle] pathForResource:file ofType:@"sks"];
    /* Unarchive the file to an SKScene object */
    NSData *data = [NSData dataWithContentsOfFile:nodePath
                                          options:NSDataReadingMappedIfSafe
                                            error:nil];
    NSKeyedUnarchiver *arch = [[NSKeyedUnarchiver alloc] initForReadingWithData:data];
    [arch setClass:self forClassName:@"SKScene"];
    SKScene *scene = [arch decodeObjectForKey:NSKeyedArchiveRootObjectKey];
    [arch finishDecoding];

    return scene;
}

@end

@implementation GameViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Configure the view.
    SKView * skView = (SKView *)self.view;
    skView.showsFPS = YES;
    skView.showsNodeCount = YES;
    /* Sprite Kit applies additional optimizations to improve rendering performance */
    skView.ignoresSiblingOrder = YES;

    // Create and configure the scene.
    GameScene *scene = [GameScene unarchiveFromFile:@"GameScene"];
    scene.scaleMode = SKSceneScaleModeAspectFill;

    // Present the scene.
    [skView presentScene:scene];
}

Answer 1

您可以使用DOM遍历来实现此目的。在click的{{1}}处理程序中，h3函数可用于检索以下元素。试试这个：

next()

$('h3').click(function() {
  $(this).next('div').slideToggle();
});

Answer 2

您可以使用.next()来获得紧随其后的兄弟。

$(document).ready(function(){
    $("h3").click(function(){
        $(this).next("#section").slideToggle();
    });
});

此外，由于您希望将其设为通用，因此请勿使用ID。请改用类。像这样的东西

<h3 class="assignments">Assignments</h3>
<div class="section">
  Assignment Count <input type="number" name="assignment_count">
</div> 

$("h3").click(function(){
  $(this).next(".section").slideToggle();
});

＆＃13;

$("h3").click(function() {
  $(this).next(".section").slideToggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3 class="assignments">Assignments 1</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

<h3 class="assignments">Assignments 2</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

<h3 class="assignments">Assignments 3</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

<h3 class="assignments">Assignments 4</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

＆＃13;

Answer 3

使用：header你可以在任何标题上触发“on”点击事件，例如h1，h2，h3，h4，h5，h6 ..

$(document).ready(function(){
    $(":header").on('click',function(){
        $(this).nextUntil(":header").slideToggle();
    });
}); 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="assignments1">Assignment1</h1>
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>
 <h2 id="assignments2">Assignments2</h2>       
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>
 <h3 id="assignments3">Assignments3</h3>       
 <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>

只有slideToggle（）子div的通用方法

3 个答案: