Question

我对jquery比较新，并且我试图在每次点击时改变js手风琴上的向上和向下箭头，不幸的是，我遇到了一个错误，只有当我调试一个坏变量时它才有效。当我onclick =“embiggen（1）”时，有没有人对我可能做错了什么有任何指导，例如如果它的手风琴是一个？

function arrowup(id){
$('#downarrow'+id).remove();
$('#dropdown'+id).append('</a>');
$('#dropdown'+id).append('<i id="uparrow'+ id +'" class="icon-1 icon-chevron-up">');
}

function arrowdown(id){
$('#uparrow'+id).remove();
$('#dropdown'+id).append('</a>');
$('#dropdown'+id).append('<i id="downarrow'+ id +'" class="icon-1 icon-chevron-down">');
}


//Switches the arrows
function embiggen(id){

var up = $('#uparrow'+id).length;
if (up == 1){
    arrowdown(id);
    console.log(i see you);
}
var down = $('#downarrow'+id).length;
if (down == 1){
    arrowup(id);
}

}

Answer 1

问题在于：

$('#dropdown'+id).append('</a>');

应该是这样的：

$('#dropdown'+id).append('<a/>');

轻微改动，但我刚刚测试过，而</a>无效。

此外，<i>需要一个像这样的封闭标签：

.append('<i id="downarrow'+ id +'" class="icon-1 icon-chevron-down"></i>')

Answer 2

根据评论，这里是如何使用伪元素。我正在使用CSS箭头，但你可以给它们一个固定的宽度和高度，并使用背景图像作为图标。

演示： http://jsbin.com/oyemaj/1/edit

HTML：

<div class="accordion">
  <h2>Lorem ipsum</h2>
  <p>Porta est magna adipiscing...</p>
</div>

CSS：

.accordion h2 {
  position: relative;
  padding: .5em;  
  background: #ddd;
  cursor: pointer;
}

.accordion h2:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -5px;
  border: 10px solid transparent;
  border-top-color: blue;
}

.accordion h2.open:after {
  margin-top: -15px;
  border-color: transparent;
  border-bottom-color: blue;
}

.accordion p { display: none }

jQuery的：

$('.accordion h2').click(function() {
  $(this).toggleClass('open').next().slideToggle();
});

是的，如果你使用这种方法，这就是你需要的所有jQuery。

为什么只有在控制台记录一个错误的变量时，这个附加才有效

2 个答案: