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

Swap icon to show relevant expand or collapse

本文关键字：折叠 图标 显示 交换      更新时间：2023-09-26

我有一些代码可以解释和折叠内容。这段代码最初用扩展/折叠（在下面注释）代替了标题，但我希望在唯一的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>

希望这是有道理的。

如果我理解你的问题，我想这就是你想要的：

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
}

修复您当前的问题。这将工作

$(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');
           }
});
});
相关文章：