0

我对 jquery 比较陌生，并且试图在每次单击时更改 js 手风琴上的向上和向下箭头，不幸的是，我遇到了一个错误，它只有在我 console.log 一个错误的变量时才有效。当我 onclick="embiggen(1)" 时，是否有人对我可能做错了什么有任何指导，例如，如果它的手风琴 id 是一个？

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);
}

}
4

2 回答 2

1

问题在这里：

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

应该是这样的：

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

微小的变化，但我只是测试它并</a>不起作用。

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

.append('<i id="downarrow'+ id +'" class="icon-1 icon-chevron-down"></i>')
于 2013-05-29T00:54:20.643 回答
1

根据评论，这是使用伪元素的方法。我正在使用 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。

于 2013-05-29T01:14:53.170 回答