Question

我的手风琴可以扩大崩溃。我设置了一些FontAwesome图标，以帮助说明它何时打开和关闭 - 但是，我似乎无法让它更改图标。

我将这些知识基于我看到的其他StackOverflow帖子 - 但由于某种原因，我似乎无法让我的工作。如果我不得不猜测我肯定错过了jQuery的球。我在那里挣扎，所以我假设我没有选择正确的元素。

我把手风琴的代码块放到JSFiddle中： Quora

$(this).find($(".fa")).removeClass('fa-caret-right').addClass('fa-caret-down');

是我认为绊倒了我（在我的jsfiddle看到的第14行 - 我现在注释掉了，因为它不起作用）

我尝试将一些内容写入console.log以帮助确定我是否在代码中选择了正确的部分，但遗憾的是我无法弄明白。

为了让我的插入符号在扩展时旋转到向下位置，我需要更改什么？

（一个注意：那里有几个箭头，我正在测试不同的图标，但我认为它将是相同的“fa-caret-right”/“fa-caret-down”与“fa-angle”右汉字 “/” FA-脱字符号向下“）。

Answer 1

您需要使用最新版本的FA，5.0.9

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

和jQuery 3.x

$(this)
    .find('[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');

然后您可以使用文档提供的示例：

https://fontawesome.com/how-to-use/svg-with-js

部分＆＃34;支持动态变化＆＃34;

cd path_to_data
# Process a single sample and a single product name
doit() {
    SAMPLE_FOLDER="$1"
    PRODUCT_NAME_NO_SPACES="$2"
    SEQ="$3"
    # Make sure temporary files are named uniquely
    # so any parallel job will not overwrite these.
    GFF=${TMP_DIR}/tmp.gff-$SEQ
    cd ${SAMPLE_FOLDER}/another_folder
    echo "$SAMPLE_FOLDER was found"

    PRODUCT_NAME=`echo ${PRODUCT_NAME_NO_SPACES} | tr "@" " "`
        echo "$PRODUCT_NAME with white spaces"
        BED_FILENAME=${BED_DIR}/intersect_${PRODUCT_NAME_NO_SPACES}_${SAMPLE_FOLDER}.bed
        grep "$PRODUCT_NAME" file_to_search_through > $GFF

        cat $GFF | some 'awk' command  > ${BED_FILENAME}

        samtools view -L ${BED_FILENAME} another_input_file.bam | many | pipes | with | 'awk' | and | perl | etc
        rm $GFF
    rmdir -p ${OUTPUT_DIR}/tmp
}
export -f doit
# These variables are defined outside the function and must be exported to be visible
export BED_DIR
export TMP_DIR
export OUTPUT_DIR
# If there are many of these variables, use env_parallel instead of
# parallel. Then you do not need to export the variables.

你可以在小提琴中找到结果：https://jsfiddle.net/0hkd2sor/3/

Answer 2

您可以在onclick侦听器中添加此代码以切换Class

if(this.classList.value.indexOf("fa-caret-right") > -1){
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-right");
}else
{
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-down");
}

使用Javascript更改字体真棒图标 - 展开/折叠手风琴

2 个答案: