在移动页面上展开/折叠

Question

我有件奇怪的事要发生。

我有一个页面，上面有几个项目，每个项目都有一个图标字体。当单击该图标时，它会更改该图标，并显示一个新的

元素显示在其下方。当然，相反的情况发生了，再次点击会改变图标并隐藏它。这很好用。

然而，当我试图让它在移动版本上工作时，它被称为“模式”(它有点像一个模式)，展开/折叠不起作用。当单击按钮时，会出现主模式，所以这不是问题。我在iPhone 5上使用Chrome模拟器。同样的函数被调用了，我验证了它找到了这个函数，但它不会展开(所以我也不能测试折叠)。

这是基本的HTML：

        <p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
        <p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals.  Available on <a href="">iOS</a> or <a href="">Android</a>.</p>

css：

.plus-fa {
    &:before {
        @include icon($icon-plus-fa);
        color: #0056A7;
    }
}
.minus-fa {
    &:before {
        @include icon($icon-minus-fa);
        color: #0056A7;
    }
}
.goApps {
    display:none;
    padding-bottom: 10px;
}

和jquery函数：

$(document).ready(function(){
    $(".featureToggle").click(function(){
        var togglelist = "#" + $( this ).attr('id') + '_list';
        $(togglelist).toggle();
        $( this ).toggleClass('plus-fa');
        $( this ).toggleClass('minus-fa');
    });
 });

使用的代码在桌面版本和移动版本上完全相同，尽管它们位于为桌面版本和移动版本指定的不同scss文件中。

有谁能帮我找出为什么它不能工作吗？我想知道这是不是一个“模式”的限制，或者是我遗漏了一些简单的东西。

Answer 1

将#放入href中

<p><span id="CraveTV" class="featureToggle plus-fa"></span> CraveTV </p>
<p id="CraveTV_list" class="goApps">Stream Showtime hits, HBO classics, the best sitcoms in TV history, and CraveTV originals.  Available on <a href="#">iOS</a> or <a href="#">Android</a>.</p>