Question

我有一些代码可以解释和折叠内容。此代码最初使用Expand / Collapse（下面已注释掉）替换了标题，但我想要的是一个图像或文本（+ / - ）与唯一的h2标记相关。

脚本是：

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    //$header.text(function () {
        //change text based on condition
        //return $content.is(":visible") ? "-" : "+";
    //});
});
});

内容看起来像

<div class="header">
      <h2>The Role</h2>
      </div>
<div class="content">
      <?php the_field('the_role')?>
</div>
<div class="header">
      <h2>Your Experience</h2>
      </div>
<div class="content">
      <?php the_field('your_experience')?>
</div>

希望这是有道理的。

Answer 1

如果我理解你的问题，我认为这就是你要找的：

http://jsfiddle.net/wf_4/NJR22/

HTML：

<div class="header">
    <span>-</span>  
    <h2>The Role</h2>
</div>
<div class="content">
    text here
</div>
<div class="header">
    <span>-</span>  
    <h2>Your Experience</h2>
</div>
<div class="content">
    text here
</div>

脚本：

$(".header").click(function () {

    var $header = $(this),
        $span = $header.find(">:first-child"),
    //getting the next element
        $content = $header.next();
    //open up the content needed
    $content.slideToggle(500)

    if ($span.text() == "-")
        $span.text("+")
    else {
        $span.text("-")
    }
});

CSS：

.header > span {
    float:left;
    width:20px

}

Answer 2

解决当前问题。这可以工作

$(function() {
$('.header').each(function() {
   if( $(this).next('div.content').length > 0 ) {
       $(this).prepend('<img src="collapsed.png" class="collapser" />');
   }
});
});

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed

$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    //$header.text(function () {
        //change text based on condition
          if( $content.is(":visible") ) {
            $header.find('.collapser').attr('src','collapsed.png');
           } else {
             $header.find('.collapser').attr('src','expanded.png');
           }
        //return $content.is(":visible") ? "-" : "+";
    //});
});
});

如果我是你，我会重构，并且这样做的 HTML

<div class="accordio"> <div class="header"> <img src="collapsed.png" class="collapser" /> <h2>The Role</h2> </div> <div class="content"> ss </div> </div> <div class="accordio"> <div class="header"> <img src="collapsed.png" class="collapser" /> <h2>Your experience</h2> </div> <div class="content"> ss </div> </div>

<强>脚本

$(".accordio .header").click(function () { $header = $(this); $content = $header.parent().find('.content'); $content.slideToggle(500, function () { if( $content.is(":visible") ) { $header.find('.collapser').attr('src','collapsed.png'); } else { $header.find('.collapser').attr('src','expanded.png'); } }); });

交换图标以显示相关的展开或折叠

2 个答案: