Question

我有一个p标记，当点击它时会显示一些使用.slideToggle显示的文字，但有一件事我无法开始工作，就是当你点击p时标签，它旁边的箭头将从指向右侧变为指向下方。当你再次点击p标签时，它将返回指向右边而不是指向下方。

HTML：

<p id="section1">&#9658; Consectetur</p> 
<table class="bordered"> 
<tr> 
<td class="blue_box_outer_left">Lorem</td> 
<td class="white_box">Ipsum</td> 
<td class="white_box">Sit</td> 
</tr> 
</table> 
<p id="section1_balk">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

<p id="section2">&#9658; Adipiscing</p> 
<table class="bordered"> 
<tr> 
<td class="white_box">Nam</td> 
<td class="blue_box">Vitae</td> 
<td class="blue_box">Enim</td> 
<td class="white_box">Quam</td> 
</tr> 
</table> 
<p id="section2_balk">Nam vitae enim eget quam vestibulum posuere. Phasellus id.</p>

jquery的：

$(document).ready(function() { 
for(var i = 0 ; i <= 2 ; i++) { 
$('#section'+i).click( function() { 
    $('#'+this.id+'_balk').slideToggle(); 
            }); 
    }  
});

你可以在这里看到整个事情：

http://jsfiddle.net/hbrovell/65dbG/

箭头实体将替换为箭头图像。

任何人都有解决方法如何做到这一点？

Answer 1

请参阅操作：http://jsfiddle.net/y5LAJ/22/

$(document).ready(function() { 
for(var i = 0 ; i <= 3 ; i++) { 
  $('#section'+i).click( function() {
    var me = $(this);
      $('#'+this.id+'_balk').slideToggle(
        function () {
          if ($(this).is(':visible')) {
            me.addClass('open');
          }
          else {
            me.removeClass('open'); 
          }
        }) 
      }); 
    }  
});

您还可以尝试使用图标的webfonts。

p[id^="section"].toggle-section:before {
    content: "\25B6";
    padding-right: 5px;
}
p[id^="section"].toggle-section.open:before {
    content: "\25BC";
}

Answer 2

您可以更好地对HTML进行分组，例如为不同的DIV制作不同的手风琴，以便处理更容易。由于我不想广泛地更改HTML，因此我制作了一个脚本来使现有的HTML工作。请参阅更新的小提琴here

我不得不在DOM遍历中应用一些不好的方法，因为HTML中的结构很糟糕，如下所示。

$(this).prev().prev().find('img').attr('src',downImage);

更改.slideToggle上的图像

2 个答案: